-
-
- )
-})
+ )
+ }
+)
CodeMirror.displayName = 'CodeMirror'
diff --git a/components/SectionedForm.tsx b/src/components/SectionedForm.tsx
similarity index 100%
rename from components/SectionedForm.tsx
rename to src/components/SectionedForm.tsx
index 41d608ab..8ac92560 100644
--- a/components/SectionedForm.tsx
+++ b/src/components/SectionedForm.tsx
@@ -1,7 +1,7 @@
-import { cn } from '@/lib/utils'
import { createAtom } from 'juststore'
import type { ComponentType, ReactNode, SVGProps } from 'react'
import { useCallback, useEffect, useId, useRef } from 'react'
+import { cn } from '@/lib/utils'
export type SectionId = string
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
new file mode 100644
index 00000000..a822f52e
--- /dev/null
+++ b/src/components/ThemeProvider.tsx
@@ -0,0 +1,116 @@
+import { ScriptOnce } from '@tanstack/react-router'
+import { createClientOnlyFn, createIsomorphicFn } from '@tanstack/react-start'
+import { createContext, type ReactNode, use, useEffect, useState } from 'react'
+
+const UserThemeSchema = ['light', 'dark', 'system'] as const
+
+export type UserTheme = (typeof UserThemeSchema)[number]
+export type AppTheme = 'light' | 'dark'
+
+const themeStorageKey = 'ui-theme'
+
+const getStoredUserTheme = createIsomorphicFn()
+ .server((): UserTheme => 'system')
+ .client((): UserTheme => {
+ const stored = localStorage.getItem(themeStorageKey) as UserTheme | null
+ return stored && UserThemeSchema.includes(stored) ? stored : 'system'
+ })
+
+const setStoredTheme = createClientOnlyFn((theme: UserTheme) => {
+ const validatedTheme = UserThemeSchema.includes(theme) ? theme : 'system'
+ localStorage.setItem(themeStorageKey, validatedTheme)
+})
+
+const getSystemTheme = createIsomorphicFn()
+ .server((): AppTheme => 'light')
+ .client((): AppTheme => {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ })
+
+const handleThemeChange = createClientOnlyFn((userTheme: UserTheme) => {
+ const validatedTheme = UserThemeSchema.includes(userTheme) ? userTheme : 'system'
+
+ const root = document.documentElement
+ root.classList.remove('light', 'dark', 'system')
+
+ if (validatedTheme === 'system') {
+ const systemTheme = getSystemTheme()
+ root.classList.add(systemTheme, 'system')
+ } else {
+ root.classList.add(validatedTheme)
+ }
+})
+
+const setupPreferredListener = createClientOnlyFn(() => {
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+ const handler = () => handleThemeChange('system')
+ mediaQuery.addEventListener('change', handler)
+ return () => mediaQuery.removeEventListener('change', handler)
+})
+
+const themeScript = (() => {
+ function themeFn() {
+ try {
+ const storedTheme = localStorage.getItem('ui-theme') || 'system'
+ const validTheme = ['light', 'dark', 'system'].includes(storedTheme) ? storedTheme : 'system'
+
+ if (validTheme === 'system') {
+ const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+ ? 'dark'
+ : 'light'
+ document.documentElement.classList.add(systemTheme, 'system')
+ } else {
+ document.documentElement.classList.add(validTheme)
+ }
+ } catch {
+ const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+ ? 'dark'
+ : 'light'
+ document.documentElement.classList.add(systemTheme, 'system')
+ }
+ }
+ return `(${themeFn.toString()})();`
+})()
+
+type ThemeContextProps = {
+ userTheme: UserTheme
+ resolvedTheme: AppTheme
+ setTheme: (theme: UserTheme) => void
+}
+const ThemeContext = createContext
- {language && {language.toUpperCase()} }
-
+
+
-
+ {language && {language.toUpperCase()} }
+
+
+
- 
{siteConfig.metadata.title}
= {
},
}
-export default function LoginPage() {
- const router = useRouter()
+function LoginPage() {
+ const navigate = useNavigate()
const form = useForm(
{
@@ -41,10 +44,10 @@ export default function LoginPage() {
form.clearErrors()
await api.auth
.callback(value)
- .then(() => router.replace('/'))
+ .then(() => navigate({ to: '/', replace: true }))
.catch(error => form.password.setError(formatError(error).message))
},
- [router, form]
+ [navigate, form]
)
return (
diff --git a/app/playground/page.tsx b/src/routes/playground.tsx
similarity index 91%
rename from app/playground/page.tsx
rename to src/routes/playground.tsx
index 066471d1..907d6498 100644
--- a/app/playground/page.tsx
+++ b/src/routes/playground.tsx
@@ -1,3 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router'
import MockRequestForm from '@/components/playground/MockRequestForm'
import MockResponseForm from '@/components/playground/MockResponseForm'
import PresetExamples from '@/components/playground/PresetExamples'
@@ -8,7 +9,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
const wide = 'xl'
-export default function PlaygroundPage() {
+export const Route = createFileRoute('/playground')({
+ component: PlaygroundPage,
+})
+
+function PlaygroundPage() {
return (
{siteConfig.metadata.title}
@@ -48,21 +47,40 @@ export default function Titlebar() {
)
}
-function Item({ href, Icon, label, desktopOnly }: Page) {
+function Item({ href, Icon, label, desktopOnly, pureLink }: Page) {
+ const content = (
+ (null)
diff --git a/components/routes/content/LogsHeader.tsx b/src/components/routes/content/LogsHeader.tsx
similarity index 98%
rename from components/routes/content/LogsHeader.tsx
rename to src/components/routes/content/LogsHeader.tsx
index d176204a..b07e01e9 100644
--- a/components/routes/content/LogsHeader.tsx
+++ b/src/components/routes/content/LogsHeader.tsx
@@ -2,7 +2,7 @@ import { Badge } from '@/components/ui/badge'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import type { Container, ContainerImage, ProxmoxNodeConfig } from '@/lib/api'
-import { store, type RouteKey } from '../store'
+import { type RouteKey, store } from '../store'
function formatContainerName(container?: Container, proxmox?: ProxmoxNodeConfig): string {
if (container) {
diff --git a/components/routes/content/ProxmoxStatsProvider.tsx b/src/components/routes/content/ProxmoxStatsProvider.tsx
similarity index 98%
rename from components/routes/content/ProxmoxStatsProvider.tsx
rename to src/components/routes/content/ProxmoxStatsProvider.tsx
index 70675880..07404aa9 100644
--- a/components/routes/content/ProxmoxStatsProvider.tsx
+++ b/src/components/routes/content/ProxmoxStatsProvider.tsx
@@ -1,8 +1,6 @@
-'use client'
-
+import { useEffect } from 'react'
import { useWebSocketApi } from '@/hooks/websocket'
import type { ProxmoxNodeStats } from '@/lib/api'
-import { useEffect } from 'react'
import { store, useSelectedRoute } from '../store'
export default function ProxmoxStatsProvider() {
diff --git a/components/routes/content/ResponseTimeChart.tsx b/src/components/routes/content/ResponseTimeChart.tsx
similarity index 96%
rename from components/routes/content/ResponseTimeChart.tsx
rename to src/components/routes/content/ResponseTimeChart.tsx
index 9b18c45f..d9b48ce5 100644
--- a/components/routes/content/ResponseTimeChart.tsx
+++ b/src/components/routes/content/ResponseTimeChart.tsx
@@ -1,9 +1,7 @@
-'use client'
-
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { store, useSelectedRoute } from '@/components/routes/store'
-import { ChartContainer, type ChartConfig } from '@/components/ui/chart'
+import { type ChartConfig, ChartContainer } from '@/components/ui/chart'
import type { MetricsPeriod } from '@/lib/api'
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
const chartConfig = {
latency: {
diff --git a/components/routes/content/RouteDetails.tsx b/src/components/routes/content/RouteDetails.tsx
similarity index 99%
rename from components/routes/content/RouteDetails.tsx
rename to src/components/routes/content/RouteDetails.tsx
index 12ded8c3..899a1761 100644
--- a/components/routes/content/RouteDetails.tsx
+++ b/src/components/routes/content/RouteDetails.tsx
@@ -1,5 +1,7 @@
-'use client'
-
+import { yaml } from '@codemirror/lang-yaml'
+import { IconArrowRight, IconInfoCircle } from '@tabler/icons-react'
+import { useEffect } from 'react'
+import { stringify as stringifyYAML } from 'yaml'
import { CodeMirror } from '@/components/ObjectDataList'
import { store, useSelectedRoute } from '@/components/routes/store'
import KeyboardReturn from '@/components/svg/keyboard-return'
@@ -13,10 +15,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
import type { IdlewatcherConfig } from '@/lib/api'
import { formatDuration, formatGoDuration, formatRelTime } from '@/lib/format'
import { cn } from '@/lib/utils'
-import { yaml } from '@codemirror/lang-yaml'
-import { IconArrowRight, IconInfoCircle } from '@tabler/icons-react'
-import { useEffect } from 'react'
-import { stringify as stringifyYAML } from 'yaml'
import { decodeRouteKey } from '../utils'
import Logs from './Logs'
import LogsHeader from './LogsHeader'
diff --git a/components/routes/content/RoutesDetailProvider.tsx b/src/components/routes/content/RoutesDetailProvider.tsx
similarity index 89%
rename from components/routes/content/RoutesDetailProvider.tsx
rename to src/components/routes/content/RoutesDetailProvider.tsx
index 04ac9b53..ff745cdd 100644
--- a/components/routes/content/RoutesDetailProvider.tsx
+++ b/src/components/routes/content/RoutesDetailProvider.tsx
@@ -1,8 +1,6 @@
-'use client'
-
import { useWebSocketApi } from '@/hooks/websocket'
import type { Route } from '@/lib/api'
-import { store, type RouteKey } from '../store'
+import { type RouteKey, store } from '../store'
import { encodeRouteKey } from '../utils'
export default function RoutesDetailProvider() {
diff --git a/components/routes/content/StatsBar.tsx b/src/components/routes/content/StatsBar.tsx
similarity index 98%
rename from components/routes/content/StatsBar.tsx
rename to src/components/routes/content/StatsBar.tsx
index 4c2edc5b..9f26e60e 100644
--- a/components/routes/content/StatsBar.tsx
+++ b/src/components/routes/content/StatsBar.tsx
@@ -1,6 +1,4 @@
-'use client'
-
-import { store, type RouteKey } from '@/components/routes/store'
+import { type RouteKey, store } from '@/components/routes/store'
import { formatBytes } from '@/lib/format'
import { cn } from '@/lib/utils'
import { parseProxmoxStatsLine } from './proxmox_stats'
diff --git a/components/routes/content/logs.ts b/src/components/routes/content/logs.ts
similarity index 100%
rename from components/routes/content/logs.ts
rename to src/components/routes/content/logs.ts
diff --git a/components/routes/content/proxmox_stats.ts b/src/components/routes/content/proxmox_stats.ts
similarity index 99%
rename from components/routes/content/proxmox_stats.ts
rename to src/components/routes/content/proxmox_stats.ts
index 0bb1203c..d0f94916 100644
--- a/components/routes/content/proxmox_stats.ts
+++ b/src/components/routes/content/proxmox_stats.ts
@@ -20,4 +20,4 @@ export function parseProxmoxStatsLine(line: string): ProxmoxStatsSummary {
networkRxTx: networkRxTx ?? '—',
blockReadWrite: blockReadWrite ?? '—',
}
-}
\ No newline at end of file
+}
diff --git a/components/routes/content/stats_bar.css b/src/components/routes/content/stats_bar.css
similarity index 98%
rename from components/routes/content/stats_bar.css
rename to src/components/routes/content/stats_bar.css
index 91fef6a9..e6be7949 100644
--- a/components/routes/content/stats_bar.css
+++ b/src/components/routes/content/stats_bar.css
@@ -104,7 +104,7 @@
*/
/* Common card styling for consistency */
-[class^='ds-'] {
+[class^="ds-"] {
color: var(--ds-text-default);
border-radius: 0.5rem;
transition:
@@ -112,12 +112,12 @@
transform 0.15s ease;
}
-[class^='ds-']:hover {
+[class^="ds-"]:hover {
filter: brightness(0.95);
transform: translateY(-1px);
}
-.dark [class^='ds-']:hover {
+.dark [class^="ds-"]:hover {
filter: brightness(1.1);
}
diff --git a/components/routes/store.ts b/src/components/routes/store.ts
similarity index 99%
rename from components/routes/store.ts
rename to src/components/routes/store.ts
index 39707ab3..f101aeae 100644
--- a/components/routes/store.ts
+++ b/src/components/routes/store.ts
@@ -1,8 +1,6 @@
-'use client'
-
+import { createStore } from 'juststore'
import { useFragment } from '@/hooks/fragment'
import type { ProxmoxNodeStats, Route, RouteUptimeAggregate } from '@/lib/api'
-import { createStore } from 'juststore'
export type RouteDisplaySettings = {
dockerOnly: boolean
diff --git a/components/routes/style.css b/src/components/routes/style.css
similarity index 76%
rename from components/routes/style.css
rename to src/components/routes/style.css
index d6cfa739..996ef2bb 100644
--- a/components/routes/style.css
+++ b/src/components/routes/style.css
@@ -18,8 +18,11 @@
.sidebar-item-list {
height: calc(
- 100vh - var(--titlebar-height) - var(--sidebar-search-box-height) -
- var(--sidebar-header-height) - var(--sidebar-keyboard-hints-height)
+ 100vh -
+ var(--titlebar-height) -
+ var(--sidebar-search-box-height) -
+ var(--sidebar-header-height) -
+ var(--sidebar-keyboard-hints-height)
);
}
diff --git a/components/routes/utils.ts b/src/components/routes/utils.ts
similarity index 100%
rename from components/routes/utils.ts
rename to src/components/routes/utils.ts
diff --git a/components/servers/AllSystemInfoProvider.tsx b/src/components/servers/AllSystemInfoProvider.tsx
similarity index 98%
rename from components/servers/AllSystemInfoProvider.tsx
rename to src/components/servers/AllSystemInfoProvider.tsx
index dca66f44..b34dae84 100644
--- a/components/servers/AllSystemInfoProvider.tsx
+++ b/src/components/servers/AllSystemInfoProvider.tsx
@@ -1,11 +1,9 @@
-'use client'
-
+import { useEffect } from 'react'
import { useFragment } from '@/hooks/fragment'
import { useWebSocketApi } from '@/hooks/websocket'
import type { Agent, SystemInfo } from '@/lib/api'
import { api } from '@/lib/api-client'
import { toastError } from '@/lib/toast'
-import { useEffect } from 'react'
import { store } from './store'
export default function AllSystemInfoProvider() {
diff --git a/components/servers/NewAgentButton.tsx b/src/components/servers/NewAgentButton.tsx
similarity index 99%
rename from components/servers/NewAgentButton.tsx
rename to src/components/servers/NewAgentButton.tsx
index 178cf721..3e372950 100644
--- a/components/servers/NewAgentButton.tsx
+++ b/src/components/servers/NewAgentButton.tsx
@@ -1,3 +1,8 @@
+import { IconCheck, IconPlus } from '@tabler/icons-react'
+import { createMixedState, useForm, useMemoryStore } from 'juststore'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { parse as parseYAML, stringify as stringifyYAML } from 'yaml'
import { StoreCheckboxField, StoreFormCheckboxField } from '@/components/store/Checkbox'
import { StoreFormInputField } from '@/components/store/Input'
import { StoreFormRadioField } from '@/components/store/Radio'
@@ -12,19 +17,15 @@ import {
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
-import { type NewAgentRequest, type NewAgentResponse } from '@/lib/api'
+import type { NewAgentRequest, NewAgentResponse } from '@/lib/api'
import { api } from '@/lib/api-client'
import { toastError } from '@/lib/toast'
import { cn } from '@/lib/utils'
import type { Config } from '@/types/godoxy'
-import { IconCheck, IconPlus } from '@tabler/icons-react'
-import { createMixedState, useForm, useMemoryStore } from 'juststore'
-import { useState } from 'react'
-import { toast } from 'sonner'
-import { parse as parseYAML, stringify as stringifyYAML } from 'yaml'
import Docker from '../svg/docker'
import Linux from '../svg/linux'
import { FieldGroup } from '../ui/field'
+
const agentTypes = [
{
type: 'docker',
diff --git a/components/servers/Sidebar.tsx b/src/components/servers/Sidebar.tsx
similarity index 99%
rename from components/servers/Sidebar.tsx
rename to src/components/servers/Sidebar.tsx
index 50b2b9e2..3c72bec4 100644
--- a/components/servers/Sidebar.tsx
+++ b/src/components/servers/Sidebar.tsx
@@ -1,8 +1,3 @@
-'use client'
-
-import type { DiskUsageStat, SystemInfo } from '@/lib/api'
-import { formatBytes, formatShortTime, formatTemperature } from '@/lib/format'
-import { cn } from '@/lib/utils'
import type { FieldPath, FieldPathValue } from 'juststore'
import {
Activity,
@@ -13,7 +8,10 @@ import {
LucideCpu,
LucideHardDrive,
} from 'lucide-react'
-import { type ElementType } from 'react'
+import type { ElementType } from 'react'
+import type { DiskUsageStat, SystemInfo } from '@/lib/api'
+import { formatBytes, formatShortTime, formatTemperature } from '@/lib/format'
+import { cn } from '@/lib/utils'
import { Label } from '../ui/label'
import { RadioGroup, RadioGroupField } from '../ui/radio-group'
import { Skeleton } from '../ui/skeleton'
diff --git a/components/servers/content/Charts.tsx b/src/components/servers/content/Charts.tsx
similarity index 98%
rename from components/servers/content/Charts.tsx
rename to src/components/servers/content/Charts.tsx
index a6a04997..d2c7a041 100644
--- a/components/servers/content/Charts.tsx
+++ b/src/components/servers/content/Charts.tsx
@@ -1,13 +1,13 @@
+import { type ReactNode, useMemo } from 'react'
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import {
+ type ChartConfig,
ChartContainer,
ChartLegend,
ChartTooltip,
ChartTooltipContent,
- type ChartConfig,
} from '@/components/ui/chart'
import type { MetricsPeriod, SystemInfoAggregateMode } from '@/lib/api'
-import { useMemo, type ReactNode } from 'react'
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { store } from '../store'
function formatTimestampAsTime(ts: number) {
diff --git a/components/servers/content/Content.tsx b/src/components/servers/content/Content.tsx
similarity index 99%
rename from components/servers/content/Content.tsx
rename to src/components/servers/content/Content.tsx
index 326fefc2..cfb81993 100644
--- a/components/servers/content/Content.tsx
+++ b/src/components/servers/content/Content.tsx
@@ -1,5 +1,5 @@
-'use client'
-
+import { IconCheck, IconServer, IconX } from '@tabler/icons-react'
+import { Suspense, useCallback, useMemo } from 'react'
import SystemInfoGraphsProvider from '@/components/servers/content/SystemInfoGraphsProvider'
import { Badge } from '@/components/ui/badge'
import { Label } from '@/components/ui/label'
@@ -14,8 +14,6 @@ import VersionText from '@/components/VersionText'
import { useFragment } from '@/hooks/fragment'
import type { MetricsPeriod } from '@/lib/api'
import { formatBytes, formatTemperature } from '@/lib/format'
-import { IconCheck, IconServer, IconX } from '@tabler/icons-react'
-import { Suspense, useCallback, useMemo } from 'react'
import { store } from '../store'
import MetricChart from './Charts'
diff --git a/components/servers/content/SystemInfoGraphsProvider.tsx b/src/components/servers/content/SystemInfoGraphsProvider.tsx
similarity index 99%
rename from components/servers/content/SystemInfoGraphsProvider.tsx
rename to src/components/servers/content/SystemInfoGraphsProvider.tsx
index 9d163538..5be34034 100644
--- a/components/servers/content/SystemInfoGraphsProvider.tsx
+++ b/src/components/servers/content/SystemInfoGraphsProvider.tsx
@@ -1,5 +1,3 @@
-'use client'
-
import { useWebSocketApi } from '@/hooks/websocket'
import type { MetricsPeriod, SystemInfoAggregate, SystemInfoAggregateMode } from '@/lib/api'
import { store } from '../store'
diff --git a/components/servers/store.ts b/src/components/servers/store.ts
similarity index 99%
rename from components/servers/store.ts
rename to src/components/servers/store.ts
index 7a7d4bbc..0eb4b220 100644
--- a/components/servers/store.ts
+++ b/src/components/servers/store.ts
@@ -1,5 +1,4 @@
-'use client'
-
+import { createStore } from 'juststore'
import type {
Agent,
MetricsPeriod,
@@ -8,7 +7,6 @@ import type {
SystemInfoAggregate,
SystemInfoAggregateMode,
} from '@/lib/api'
-import { createStore } from 'juststore'
type Store = {
temperatureUnit: 'celsius' | 'fahrenheit'
diff --git a/components/svg/docker.tsx b/src/components/svg/docker.tsx
similarity index 99%
rename from components/svg/docker.tsx
rename to src/components/svg/docker.tsx
index 28fd6cec..06cf3694 100644
--- a/components/svg/docker.tsx
+++ b/src/components/svg/docker.tsx
@@ -1,4 +1,5 @@
import type { SVGProps } from 'react'
+
const Docker = ({
colored = false,
...props
diff --git a/components/svg/duckduckgo.tsx b/src/components/svg/duckduckgo.tsx
similarity index 99%
rename from components/svg/duckduckgo.tsx
rename to src/components/svg/duckduckgo.tsx
index 8cd4858c..6745348f 100644
--- a/components/svg/duckduckgo.tsx
+++ b/src/components/svg/duckduckgo.tsx
@@ -1,4 +1,5 @@
import type { SVGProps } from 'react'
+
const DuckDuckGo = (props: SVGProps) => (
-
+
)
}
diff --git a/app/page.tsx b/src/routes/index.tsx
similarity index 69%
rename from app/page.tsx
rename to src/routes/index.tsx
index ebebef19..220b4d17 100644
--- a/app/page.tsx
+++ b/src/routes/index.tsx
@@ -1,8 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
import AppEditDialog from '@/components/home/AppEditDialog'
import AppGrid from '@/components/home/AppsGrid'
import SystemStats from '@/components/home/SystemStats'
-export default function HomePage() {
+export const Route = createFileRoute('/')({
+ component: HomePage,
+})
+
+function HomePage() {
return (
+
+ )
+
+ if (pureLink) {
+ return (
+
+ {content}
+
+ )
+ }
+
return (
-
-
+ {content}
)
}
diff --git a/components/layout/TitlebarController.tsx b/src/components/layout/TitlebarController.tsx
similarity index 71%
rename from components/layout/TitlebarController.tsx
rename to src/components/layout/TitlebarController.tsx
index f3693056..59ba90a9 100644
--- a/components/layout/TitlebarController.tsx
+++ b/src/components/layout/TitlebarController.tsx
@@ -1,30 +1,29 @@
-'use client'
-import { usePathname } from 'next/navigation'
+import { useLocation } from '@tanstack/react-router'
import { useEffect } from 'react'
export default function TitlebarController() {
- const pathname = usePathname()
+ const location = useLocation()
useEffect(() => {
const titlebarItems = document.querySelectorAll('.titlebar-item')
titlebarItems.forEach(item => {
- if (pathname === item.getAttribute('href')) {
+ if (location.pathname === item.getAttribute('href')) {
item.setAttribute('data-active', 'true')
} else {
item.removeAttribute('data-active')
}
})
- }, [pathname])
+ }, [location.pathname])
useEffect(() => {
const titlebar = document.getElementById('titlebar')
if (!titlebar) return
// hide titlebar on login page
- if (pathname === '/login') {
+ if (location.pathname === '/login') {
titlebar.setAttribute('data-hidden', 'true')
} else {
titlebar.setAttribute('data-hidden', 'false')
}
- }, [pathname])
+ }, [location.pathname])
return null
}
diff --git a/components/playground/MockRequestForm.tsx b/src/components/playground/MockRequestForm.tsx
similarity index 99%
rename from components/playground/MockRequestForm.tsx
rename to src/components/playground/MockRequestForm.tsx
index 79a61b68..161b52a0 100644
--- a/components/playground/MockRequestForm.tsx
+++ b/src/components/playground/MockRequestForm.tsx
@@ -1,11 +1,9 @@
-'use client'
-
+import { json } from '@codemirror/lang-json'
import { MapInput } from '@/components/form/MapInput'
import { StoreInputField } from '@/components/store/Input'
import { StoreSelectField } from '@/components/store/Select'
import type { MockCookie } from '@/lib/api'
import { HTTP_METHODS } from '@/types/godoxy/types'
-import { json } from '@codemirror/lang-json'
import { FieldGroup, FieldLegend, FieldSet } from '../ui/field'
import { StoreCodeMirrorField } from '../ui/store/CodeMirror'
import { store } from './store'
diff --git a/components/playground/MockResponseForm.tsx b/src/components/playground/MockResponseForm.tsx
similarity index 99%
rename from components/playground/MockResponseForm.tsx
rename to src/components/playground/MockResponseForm.tsx
index 8ec8c8c8..d837eb1a 100644
--- a/components/playground/MockResponseForm.tsx
+++ b/src/components/playground/MockResponseForm.tsx
@@ -1,8 +1,6 @@
-'use client'
-
+import { json } from '@codemirror/lang-json'
import { MapInput } from '@/components/form/MapInput'
import { StoreInputField } from '@/components/store/Input'
-import { json } from '@codemirror/lang-json'
import { FieldGroup, FieldLegend, FieldSet } from '../ui/field'
import { StoreCodeMirrorField } from '../ui/store/CodeMirror'
import { store } from './store'
diff --git a/components/playground/PresetExamples.tsx b/src/components/playground/PresetExamples.tsx
similarity index 99%
rename from components/playground/PresetExamples.tsx
rename to src/components/playground/PresetExamples.tsx
index b299ed1c..2bd50d44 100644
--- a/components/playground/PresetExamples.tsx
+++ b/src/components/playground/PresetExamples.tsx
@@ -1,5 +1,4 @@
-'use client'
-
+import { useState } from 'react'
import { Button } from '@/components/ui/button'
import {
Select,
@@ -8,7 +7,6 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
-import { useState } from 'react'
import { examples } from './examples'
import { store } from './store'
diff --git a/components/playground/ResultsDisplay.tsx b/src/components/playground/ResultsDisplay.tsx
similarity index 99%
rename from components/playground/ResultsDisplay.tsx
rename to src/components/playground/ResultsDisplay.tsx
index 507bc7ed..3df53dd9 100644
--- a/components/playground/ResultsDisplay.tsx
+++ b/src/components/playground/ResultsDisplay.tsx
@@ -1,5 +1,10 @@
-'use client'
-
+import { json } from '@codemirror/lang-json'
+import { yaml } from '@codemirror/lang-yaml'
+import { IconCheck, IconX } from '@tabler/icons-react'
+import { EditorView } from '@uiw/react-codemirror'
+import { motion } from 'motion/react'
+import { useEffect, useState } from 'react'
+import { stringify as stringifyYAML } from 'yaml'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { ScrollArea } from '@/components/ui/scroll-area'
@@ -13,14 +18,7 @@ import {
TableRow,
} from '@/components/ui/table'
import { cn } from '@/lib/utils'
-import { json } from '@codemirror/lang-json'
-import { yaml } from '@codemirror/lang-yaml'
-import { IconCheck, IconX } from '@tabler/icons-react'
-import { EditorView } from '@uiw/react-codemirror'
-import { motion } from 'motion/react'
-import { useEffect, useState } from 'react'
-import { stringify as stringifyYAML } from 'yaml'
-import { GoDoxyErrorAlert, type GoDoxyError } from '../GoDoxyError'
+import { type GoDoxyError, GoDoxyErrorAlert } from '../GoDoxyError'
import { CodeMirror } from '../ObjectDataList'
import { store } from './store'
diff --git a/components/playground/RulesEditor.tsx b/src/components/playground/RulesEditor.tsx
similarity index 97%
rename from components/playground/RulesEditor.tsx
rename to src/components/playground/RulesEditor.tsx
index e429a0da..7b67739d 100644
--- a/components/playground/RulesEditor.tsx
+++ b/src/components/playground/RulesEditor.tsx
@@ -1,5 +1,3 @@
-'use client'
-
import YAMLEditor from '@/components/YAMLEditor'
import { store } from './store'
diff --git a/components/playground/RunButton.tsx b/src/components/playground/RunButton.tsx
similarity index 98%
rename from components/playground/RunButton.tsx
rename to src/components/playground/RunButton.tsx
index 566edbfe..e8719b1a 100644
--- a/components/playground/RunButton.tsx
+++ b/src/components/playground/RunButton.tsx
@@ -1,9 +1,7 @@
-'use client'
-
-import type { RouteApiRawRule } from '@/lib/api'
import { IconPlayerPlay } from '@tabler/icons-react'
import { toast } from 'sonner'
import { parse as parseYAML } from 'yaml'
+import type { RouteApiRawRule } from '@/lib/api'
import { Button } from '../ui/button'
import { store } from './store'
import { usePlayground } from './usePlayground'
diff --git a/components/playground/examples.ts b/src/components/playground/examples.ts
similarity index 100%
rename from components/playground/examples.ts
rename to src/components/playground/examples.ts
diff --git a/components/playground/store.ts b/src/components/playground/store.ts
similarity index 98%
rename from components/playground/store.ts
rename to src/components/playground/store.ts
index 1b3d6bab..c08cd34a 100644
--- a/components/playground/store.ts
+++ b/src/components/playground/store.ts
@@ -1,7 +1,5 @@
-'use client'
-
-import type { MockRequest, MockResponse, PlaygroundResponse } from '@/lib/api'
import { createStore } from 'juststore'
+import type { MockRequest, MockResponse, PlaygroundResponse } from '@/lib/api'
export interface PlaygroundState {
rules: string
diff --git a/components/playground/usePlayground.ts b/src/components/playground/usePlayground.ts
similarity index 100%
rename from components/playground/usePlayground.ts
rename to src/components/playground/usePlayground.ts
index 312b73f8..8aa0efd4 100644
--- a/components/playground/usePlayground.ts
+++ b/src/components/playground/usePlayground.ts
@@ -1,7 +1,7 @@
+import { useCallback, useState } from 'react'
import type { PlaygroundRequest } from '@/lib/api'
import { api } from '@/lib/api-client'
import { toastError } from '@/lib/toast'
-import { useCallback, useState } from 'react'
import { store } from './store'
export function usePlayground() {
diff --git a/components/routes/PercentageText.tsx b/src/components/routes/PercentageText.tsx
similarity index 89%
rename from components/routes/PercentageText.tsx
rename to src/components/routes/PercentageText.tsx
index 9aeba0c8..8e85ac1a 100644
--- a/components/routes/PercentageText.tsx
+++ b/src/components/routes/PercentageText.tsx
@@ -1,4 +1,4 @@
-import { store, type RouteKey } from '@/components/routes/store'
+import { type RouteKey, store } from '@/components/routes/store'
import { formatPercent } from '@/lib/format'
export default function RoutePercentageText({ routeKey }: { routeKey: RouteKey }) {
diff --git a/components/routes/SearchBox.tsx b/src/components/routes/SearchBox.tsx
similarity index 100%
rename from components/routes/SearchBox.tsx
rename to src/components/routes/SearchBox.tsx
diff --git a/components/routes/Sidebar.tsx b/src/components/routes/Sidebar.tsx
similarity index 99%
rename from components/routes/Sidebar.tsx
rename to src/components/routes/Sidebar.tsx
index 5a0f605c..48867468 100644
--- a/components/routes/Sidebar.tsx
+++ b/src/components/routes/Sidebar.tsx
@@ -1,30 +1,27 @@
-'use client'
-
+import { IconFilter } from '@tabler/icons-react'
+import type { FieldPath } from 'juststore'
+import { ArrowDown, ArrowUp } from 'lucide-react'
+import { Suspense, useEffect, useRef } from 'react'
import {
+ type RouteDisplaySettings,
+ type RouteKey,
setSelectedRoute,
store,
useSelectedRoute,
- type RouteDisplaySettings,
- type RouteKey,
} from '@/components/routes/store'
import { useWebSocketApi } from '@/hooks/websocket'
import type { RouteStatusesByAlias, RouteUptimeAggregate, UptimeAggregate } from '@/lib/api'
import { toastError } from '@/lib/toast'
import { cn } from '@/lib/utils'
-import { Suspense, useEffect, useRef } from 'react'
-import { Label } from '../ui/label'
-import RoutePercentageText from './PercentageText'
-import RoutesSidebarSearchBox from './SearchBox'
-import RouteUptimeBar from './UptimeBar'
-
-import { IconFilter } from '@tabler/icons-react'
-import type { FieldPath } from 'juststore'
-import { ArrowDown, ArrowUp } from 'lucide-react'
import { AppIcon } from '../AppIcon'
import { Kbd } from '../ui/kbd'
+import { Label } from '../ui/label'
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
import { ScrollArea } from '../ui/scroll-area'
import { Switch } from '../ui/switch'
+import RoutePercentageText from './PercentageText'
+import RoutesSidebarSearchBox from './SearchBox'
+import RouteUptimeBar from './UptimeBar'
import './style.css'
import { decodeRouteKey, encodeRouteKey } from './utils'
diff --git a/components/routes/UptimeBar.tsx b/src/components/routes/UptimeBar.tsx
similarity index 96%
rename from components/routes/UptimeBar.tsx
rename to src/components/routes/UptimeBar.tsx
index 7bb5433a..8b874f61 100644
--- a/components/routes/UptimeBar.tsx
+++ b/src/components/routes/UptimeBar.tsx
@@ -1,10 +1,10 @@
-import { store, type RouteKey } from '@/components/routes/store'
+import { isEqual } from 'juststore'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { type RouteKey, store } from '@/components/routes/store'
import type { RouteStatus } from '@/lib/api'
import { formatTimestamp } from '@/lib/format'
import { cn } from '@/lib/utils'
import { healthStatusColorsFg } from '@/types/health'
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import isEqual from 'react-fast-compare'
export default function RouteUptimeBar({
routeKey,
diff --git a/components/routes/content/ContainerControls.tsx b/src/components/routes/content/ContainerControls.tsx
similarity index 98%
rename from components/routes/content/ContainerControls.tsx
rename to src/components/routes/content/ContainerControls.tsx
index ded210db..3cda25af 100644
--- a/components/routes/content/ContainerControls.tsx
+++ b/src/components/routes/content/ContainerControls.tsx
@@ -1,14 +1,12 @@
-'use client'
-
-import { store, type RouteKey } from '@/components/routes/store'
+import { IconPlayerPlay, IconRotate, IconSquare } from '@tabler/icons-react'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { type RouteKey, store } from '@/components/routes/store'
import { Button } from '@/components/ui/button'
import { ButtonGroup } from '@/components/ui/button-group'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { api } from '@/lib/api-client'
import { toastError } from '@/lib/toast'
-import { IconPlayerPlay, IconRotate, IconSquare } from '@tabler/icons-react'
-import { useState } from 'react'
-import { toast } from 'sonner'
const containerActions = [
{
diff --git a/components/routes/content/Content.tsx b/src/components/routes/content/Content.tsx
similarity index 100%
rename from components/routes/content/Content.tsx
rename to src/components/routes/content/Content.tsx
diff --git a/components/routes/content/ContentDialog.tsx b/src/components/routes/content/ContentDialog.tsx
similarity index 97%
rename from components/routes/content/ContentDialog.tsx
rename to src/components/routes/content/ContentDialog.tsx
index 7c1e2bb8..aa6e4cfe 100644
--- a/components/routes/content/ContentDialog.tsx
+++ b/src/components/routes/content/ContentDialog.tsx
@@ -1,5 +1,3 @@
-'use client'
-
import { store } from '@/components/routes/store'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { useIsMobile } from '@/hooks/use-mobile'
diff --git a/components/routes/content/DockerStatsProvider.tsx b/src/components/routes/content/DockerStatsProvider.tsx
similarity index 96%
rename from components/routes/content/DockerStatsProvider.tsx
rename to src/components/routes/content/DockerStatsProvider.tsx
index b0cf1dfa..7009c2b5 100644
--- a/components/routes/content/DockerStatsProvider.tsx
+++ b/src/components/routes/content/DockerStatsProvider.tsx
@@ -1,9 +1,7 @@
-'use client'
-
+import { useEffect } from 'react'
import { useWebSocketApi } from '@/hooks/websocket'
import type { ContainerStatsResponse } from '@/lib/api'
-import { useEffect } from 'react'
-import { store, useSelectedRoute, type DockerStatsSummary } from '../store'
+import { type DockerStatsSummary, store, useSelectedRoute } from '../store'
function summarizeStats(stats: ContainerStatsResponse): DockerStatsSummary {
const cpuTotal = stats.cpu_stats.cpu_usage.total_usage ?? 0
diff --git a/components/routes/content/Header.tsx b/src/components/routes/content/Header.tsx
similarity index 98%
rename from components/routes/content/Header.tsx
rename to src/components/routes/content/Header.tsx
index 6170a10f..8a27a7c1 100644
--- a/components/routes/content/Header.tsx
+++ b/src/components/routes/content/Header.tsx
@@ -1,4 +1,3 @@
-'use client'
import { store, useSelectedRoute } from '@/components/routes/store'
import { Label } from '@/components/ui/label'
import { formatPercent } from '@/lib/format'
diff --git a/components/routes/content/Logs.tsx b/src/components/routes/content/Logs.tsx
similarity index 98%
rename from components/routes/content/Logs.tsx
rename to src/components/routes/content/Logs.tsx
index 80ba1ed0..ba43eeb2 100644
--- a/components/routes/content/Logs.tsx
+++ b/src/components/routes/content/Logs.tsx
@@ -1,7 +1,3 @@
-import { Button } from '@/components/ui/button'
-import { useWebSocketApi } from '@/hooks/websocket'
-import { useTheme } from 'next-themes'
-
import {
IconArrowsMaximize,
IconArrowsMinimize,
@@ -12,7 +8,6 @@ import { FitAddon } from '@xterm/addon-fit'
import { WebFontsAddon } from '@xterm/addon-web-fonts'
import { WebLinksAddon } from '@xterm/addon-web-links'
import { Terminal } from '@xterm/xterm'
-
import {
Suspense,
useCallback,
@@ -23,7 +18,10 @@ import {
useRef,
useState,
} from 'react'
-import { store, type RouteKey } from '../store'
+import { useTheme } from '@/components/ThemeProvider'
+import { Button } from '@/components/ui/button'
+import { useWebSocketApi } from '@/hooks/websocket'
+import { type RouteKey, store } from '../store'
import '@xterm/xterm/css/xterm.css'
@@ -32,9 +30,9 @@ import '@fontsource/cascadia-code/700.css'
import { Query } from '@/lib/query'
import '../style.css'
-import { formatLineForTerminal, resolveThemeColorsAsync } from './logs'
-import { createAtom, type Atom } from 'juststore'
+import { type Atom, createAtom } from 'juststore'
+import { formatLineForTerminal, resolveThemeColorsAsync } from './logs'
export default function Logs({ routeKey }: { routeKey: RouteKey }) {
const logsRef = useRef
diff --git a/app/routes/page.tsx b/src/routes/routes.tsx
similarity index 80%
rename from app/routes/page.tsx
rename to src/routes/routes.tsx
index 531b6d82..d238e6f9 100644
--- a/app/routes/page.tsx
+++ b/src/routes/routes.tsx
@@ -1,8 +1,13 @@
+import { createFileRoute } from '@tanstack/react-router'
import RoutePageContent from '@/components/routes/content/Content'
import RouteContentDialog from '@/components/routes/content/ContentDialog'
import RoutesSidebar from '@/components/routes/Sidebar'
-export default function RoutesPage() {
+export const Route = createFileRoute('/routes')({
+ component: RoutesPage,
+})
+
+function RoutesPage() {
return (
<>
*/
import type * as AccessLog from './config/access_log'
import type * as ACL from './config/acl'
import type * as Autocert from './config/autocert'
@@ -37,6 +38,13 @@ import type MaxmindSchemaDeref from './maxmind.schema.deref.json'
import type MiddlewareComposeSchemaDeref from './middleware_compose.schema.deref.json'
import type RoutesSchemaDeref from './routes.schema.deref.json'
+// fixes: ReferenceError: Buffer is not defined on client side
+if (typeof window !== 'undefined') {
+ window.Buffer = {
+ isBuffer: () => false,
+ } as unknown as typeof Buffer
+}
+
import $ from '@apidevtools/json-schema-ref-parser'
const ACLSchema = (await $.dereference(_ACLSchema)) as typeof ACLSchemaDeref
@@ -75,5 +83,5 @@ export {
type Notification,
type Providers,
type Proxmox,
- type Routes
+ type Routes,
}
diff --git a/types/godoxy/maxmind.schema.json b/src/types/godoxy/maxmind.schema.json
similarity index 100%
rename from types/godoxy/maxmind.schema.json
rename to src/types/godoxy/maxmind.schema.json
diff --git a/types/godoxy/middleware_compose.schema.json b/src/types/godoxy/middleware_compose.schema.json
similarity index 100%
rename from types/godoxy/middleware_compose.schema.json
rename to src/types/godoxy/middleware_compose.schema.json
diff --git a/types/godoxy/middlewares/middleware_compose.ts b/src/types/godoxy/middlewares/middleware_compose.ts
similarity index 100%
rename from types/godoxy/middlewares/middleware_compose.ts
rename to src/types/godoxy/middlewares/middleware_compose.ts
diff --git a/types/godoxy/middlewares/middlewares.ts b/src/types/godoxy/middlewares/middlewares.ts
similarity index 99%
rename from types/godoxy/middlewares/middlewares.ts
rename to src/types/godoxy/middlewares/middlewares.ts
index 27f23dcc..a5ac0462 100644
--- a/types/godoxy/middlewares/middlewares.ts
+++ b/src/types/godoxy/middlewares/middlewares.ts
@@ -77,8 +77,7 @@ type KeyOptMapping = Record,
+ extends KeyOptMapping,
KeyOptMapping,
KeyOptMapping,
KeyOptMapping,
@@ -263,7 +262,7 @@ export type Crowdsec = {
/** Crowdsec AppSec endpoint path
*
* @default "/"
- */
+ */
endpoint?: string
/** Log blocked requests
*
diff --git a/types/godoxy/providers/healthcheck.ts b/src/types/godoxy/providers/healthcheck.ts
similarity index 100%
rename from types/godoxy/providers/healthcheck.ts
rename to src/types/godoxy/providers/healthcheck.ts
diff --git a/types/godoxy/providers/homepage.ts b/src/types/godoxy/providers/homepage.ts
similarity index 100%
rename from types/godoxy/providers/homepage.ts
rename to src/types/godoxy/providers/homepage.ts
diff --git a/types/godoxy/providers/idlewatcher.ts b/src/types/godoxy/providers/idlewatcher.ts
similarity index 100%
rename from types/godoxy/providers/idlewatcher.ts
rename to src/types/godoxy/providers/idlewatcher.ts
diff --git a/types/godoxy/providers/loadbalance.ts b/src/types/godoxy/providers/loadbalance.ts
similarity index 100%
rename from types/godoxy/providers/loadbalance.ts
rename to src/types/godoxy/providers/loadbalance.ts
diff --git a/types/godoxy/providers/proxmox.ts b/src/types/godoxy/providers/proxmox.ts
similarity index 100%
rename from types/godoxy/providers/proxmox.ts
rename to src/types/godoxy/providers/proxmox.ts
diff --git a/types/godoxy/providers/routes.ts b/src/types/godoxy/providers/routes.ts
similarity index 100%
rename from types/godoxy/providers/routes.ts
rename to src/types/godoxy/providers/routes.ts
diff --git a/types/godoxy/routes.schema.json b/src/types/godoxy/routes.schema.json
similarity index 100%
rename from types/godoxy/routes.schema.json
rename to src/types/godoxy/routes.schema.json
diff --git a/types/godoxy/types.ts b/src/types/godoxy/types.ts
similarity index 100%
rename from types/godoxy/types.ts
rename to src/types/godoxy/types.ts
diff --git a/types/health.ts b/src/types/health.ts
similarity index 100%
rename from types/health.ts
rename to src/types/health.ts
diff --git a/types/schema.ts b/src/types/schema.ts
similarity index 98%
rename from types/schema.ts
rename to src/types/schema.ts
index e58966d6..1fe2e7f8 100644
--- a/types/schema.ts
+++ b/src/types/schema.ts
@@ -289,9 +289,9 @@ function getDefaultValue(
function isObjectishSchema(inner: JSONSchema): boolean {
return Boolean(
isSchemaType(inner, 'object') ||
- inner.properties ||
- inner.additionalProperties ||
- inner.patternProperties
+ inner.properties ||
+ inner.additionalProperties ||
+ inner.patternProperties
)
}
diff --git a/test-run.compose.yml b/test-run.compose.yml
index 3a681bae..bcc36f4a 100644
--- a/test-run.compose.yml
+++ b/test-run.compose.yml
@@ -7,31 +7,11 @@ services:
env_file: .env
read_only: true
tmpfs:
- - /app/.next/cache
+ - /tmp:rw
+ - /app/node_modules/.cache:rw
security_opt:
- no-new-privileges:true
cap_drop:
- all
labels:
proxy.aliases: godoxy-next
- proxy.godoxy-next.rules: |
- - name: login page
- on: path /login
- do: pass
- - name: protected
- on: |
- !path regex("(_next/static|_next/image|favicon.ico).*")
- !path glob("/api/v1/auth/*")
- !path glob("/auth/*")
- !path regex("[A-Za-z0-9_-]+\.(svg|png|jpg|jpeg|gif|ico|webp|woff2?|eot|ttf|otf|txt)(\?.+)?")
- !path /api/v1/version
- !path /manifest.json
- do: require_auth
- - name: proxy to backend
- on: path glob("/api/v1/*")
- do: proxy http://$${API_ADDR}/
- - name: proxy to auth api
- on: path glob("/auth/*")
- do: |
- rewrite /auth /api/v1/auth
- proxy http://$${API_ADDR}/
diff --git a/tsconfig.json b/tsconfig.json
index 196cc338..498d6b4c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
"compilerOptions": {
"target": "ES2022",
"lib": ["dom", "dom.iterable", "esnext"],
+ "types": ["vite/client","vite-plugin-pwa/client"],
"allowJs": true,
"skipLibCheck": true,
"useDefineForClassFields": true,
@@ -24,25 +25,13 @@
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
- "plugins": [
- {
- "name": "next"
- }
- ],
"paths": {
- "@/*": ["./*"],
+ "@/*": ["./src/*"],
"juststore": ["./juststore/src/index.ts"],
"@/components/store/*": ["./juststore-shadcn/src/components/store/*"],
"@/public/*": ["./public/*"]
}
},
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx",
- "**/*.d.ts",
- ".next/types/**/*.ts",
- ".next/dev/types/**/*.ts"
- ],
+ "include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "wiki"]
}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..8432f37c
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,88 @@
+///