fix: handle headscale unavailability gracefully

app/components/Error.tsx

@@ -8,7 +8,6 @@ interface Props {
 	type?: 'full' | 'embedded';
 }
 
-
 function getMessage(error: Error | unknown) {
 	if (!(error instanceof Error)) {
 		return "An unknown error occurred";
@@ -18,9 +17,9 @@ function getMessage(error: Error | unknown) {
 
 	// Traverse the error chain to find the root cause
 	if (error.cause) {
-		rootError = error.cause;
+		rootError = error.cause as Error;
 		while (rootError.cause) {
-			rootError = rootError.cause;
+			rootError = rootError.cause as Error;
 		}
 	}
 

app/components/Footer.tsx

@@ -15,7 +15,7 @@ export default function Footer({ url, debug }: FooterProps) {
 	return (
 		<footer
 			className={cn(
-				'fixed bottom-0 left-0 z-50 w-full h-14',
+				'fixed bottom-0 left-0 z-40 w-full h-14',
 				'bg-ui-100 dark:bg-ui-900 text-ui-500',
 				'flex flex-col justify-center gap-1',
 				'border-t border-ui-200 dark:border-ui-800',

app/components/Header.tsx

@@ -17,10 +17,8 @@ import Menu from './Menu';
 import TabLink from './TabLink';
 
 interface Props {
-	data?: {
-		config: HeadplaneContext['config'];
-		user?: SessionData['user'];
-	};
+	config: HeadplaneContext['config'];
+	user?: SessionData['user'];
 }
 
 interface LinkProps {
@@ -45,7 +43,7 @@ function Link({ href, text, isMenu }: LinkProps) {
 	);
 }
 
-export default function Header({ data }: Props) {
+export default function Header(data: Props) {
 	return (
 		<header className="bg-main-700 dark:bg-main-800 text-ui-50">
 			<div className="container flex items-center justify-between py-4">
@@ -57,7 +55,7 @@ export default function Header({ data }: Props) {
 					<Link href="https://tailscale.com/download" text="Download" />
 					<Link href="https://github.com/tale/headplane" text="GitHub" />
 					<Link href="https://github.com/juanfont/headscale" text="Headscale" />
-					{data?.user ? (
+					{data.user ? (
 						<Menu>
 							<Menu.Button
 								className={cn(
@@ -122,7 +120,7 @@ export default function Header({ data }: Props) {
 					name="Access Control"
 					icon={<LockIcon className="w-4 h-4" />}
 				/>
-				{data?.config.read ? (
+				{data.config.read ? (
 					<>
 						<TabLink
 							to="/dns"