feature: support serving from subpath (#33)

Co-authored-by: Karthik T <karthikt.holmes+github@gmail.com>

beszel/site/src/components/routes/settings/layout.tsx

@@ -4,7 +4,7 @@ import { SidebarNav } from "./sidebar-nav.tsx"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx"
 import { useStore } from "@nanostores/react"
 import { $router } from "@/components/router.tsx"
-import { redirectPage } from "@nanostores/router"
+import { getPagePath, redirectPage } from "@nanostores/router"
 import { BellIcon, FileSlidersIcon, SettingsIcon } from "lucide-react"
 import { $userSettings, pb } from "@/lib/stores.ts"
 import { toast } from "@/components/ui/use-toast.ts"
@@ -49,17 +49,17 @@ export default function SettingsLayout() {
 	const sidebarNavItems = [
 		{
 			title: _(t({ message: `General`, comment: "Context: General settings" })),
-			href: "/settings/general",
+			href: getPagePath($router, "settings", { name: "general" }),
 			icon: SettingsIcon,
 		},
 		{
 			title: t`Notifications`,
-			href: "/settings/notifications",
+			href: getPagePath($router, "settings", { name: "notifications" }),
 			icon: BellIcon,
 		},
 		{
 			title: t`YAML Config`,
-			href: "/settings/config",
+			href: getPagePath($router, "settings", { name: "config" }),
 			icon: FileSlidersIcon,
 			admin: true,
 		},
@@ -69,8 +69,8 @@ export default function SettingsLayout() {
 
 	useEffect(() => {
 		document.title = t`Settings` + " / Beszel"
-		// redirect to account page if no page is specified
-		if (page?.path === "/settings") {
+		// @ts-ignore redirect to account page if no page is specified
+		if (!page?.params?.name) {
 			redirectPage($router, "settings", { name: "general" })
 		}
 	}, [])

beszel/site/src/components/routes/settings/notifications.tsx

@@ -13,6 +13,7 @@ import { saveSettings } from "./layout"
 import * as v from "valibot"
 import { isAdmin } from "@/lib/utils"
 import { Trans, t } from "@lingui/macro"
+import { prependBasePath } from "@/components/router"
 
 interface ShoutrrrUrlCardProps {
 	url: string
@@ -94,7 +95,7 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 							<p className="text-sm text-muted-foreground leading-relaxed">
 								<Trans>
 									Please{" "}
-									<a href="/_/#/settings/mail" className="link" target="_blank">
+									<a href={prependBasePath("/_/#/settings/mail")} className="link" target="_blank">
 										configure an SMTP server
 									</a>{" "}
 									to ensure alerts are delivered.

beszel/site/src/components/routes/settings/sidebar-nav.tsx

@@ -22,7 +22,7 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
 		<>
 			{/* Mobile View */}
 			<div className="md:hidden">
-				<Select onValueChange={(value: string) => navigate(value)} value={page?.path}>
+				<Select onValueChange={navigate} value={page?.path}>
 					<SelectTrigger className="w-full my-3.5">
 						<SelectValue placeholder="Select page" />
 					</SelectTrigger>