diff --git a/src/components/ErrorBoundaryFallback.tsx b/src/components/ErrorBoundaryFallback.tsx index 02b122f..0014b13 100644 --- a/src/components/ErrorBoundaryFallback.tsx +++ b/src/components/ErrorBoundaryFallback.tsx @@ -1,7 +1,5 @@ -import { useNavigate } from "@solidjs/router"; import { createSignal, onCleanup, onMount } from "solid-js"; import { TerminalErrorPage } from "~/components/TerminalErrorPage"; -import { useDarkMode } from "~/context/darkMode"; import { glitchText } from "~/lib/client-utils"; export interface ErrorBoundaryFallbackProps { @@ -12,23 +10,6 @@ export interface ErrorBoundaryFallbackProps { export default function ErrorBoundaryFallback( props: ErrorBoundaryFallbackProps ) { - let navigate: ((path: string) => void) | undefined; - try { - navigate = useNavigate(); - } catch (e) { - navigate = (path: string) => { - window.location.href = path; - }; - } - - let isDark: () => boolean; - try { - const darkMode = useDarkMode(); - isDark = darkMode.isDark; - } catch (e) { - isDark = () => true; - } - const [glitchError, setGlitchError] = createSignal("ERROR"); onMount(() => { @@ -83,12 +64,10 @@ export default function ErrorBoundaryFallback( ); const quickActions = ( -
-
Quick actions:
- + <> - - - - -
+ ); return ( } - commandContext={{ isDark }} /> ); } diff --git a/src/components/TerminalErrorPage.tsx b/src/components/TerminalErrorPage.tsx index 8a1e10f..ee7541b 100644 --- a/src/components/TerminalErrorPage.tsx +++ b/src/components/TerminalErrorPage.tsx @@ -6,10 +6,10 @@ import { CommandContext } from "~/lib/terminal-commands"; import { Btop } from "~/components/Btop"; +import { useLocation, useNavigate } from "@solidjs/router"; +import { useDarkMode } from "~/context/darkMode"; interface TerminalErrorPageProps { - navigate: (path: string) => void; - location: { pathname: string }; errorContent: JSX.Element; quickActions: JSX.Element; footer: JSX.Element; @@ -24,6 +24,9 @@ export function TerminalErrorPage(props: TerminalErrorPageProps) { const [btopOpen, setBtopOpen] = createSignal(false); let inputRef: HTMLInputElement | undefined; let footerRef: HTMLDivElement | undefined; + const navigate = useNavigate(); + const location = useLocation(); + const { isDark } = useDarkMode(); createEffect(() => { if (history().length > 0) { @@ -46,10 +49,11 @@ export function TerminalErrorPage(props: TerminalErrorPageProps) { }; const commands = createTerminalCommands({ - navigate: props.navigate, - location: props.location, + navigate, + location, addToHistory, openBtop: () => setBtopOpen(true), + isDark: isDark, ...props.commandContext }); @@ -98,12 +102,42 @@ export function TerminalErrorPage(props: TerminalErrorPageProps) { inputRef?.focus(); }); + const quickActions = ( +
+
Quick actions:
+ {props.quickActions} + + + + +
+ ); + return (
inputRef?.focus()} > - {/* Scanline effect */}
- {/* Main content */}
- {/* Terminal header */} - - {/* Error Content - passed as prop */} {props.errorContent} - - {/* Quick Actions - passed as prop */} - {props.quickActions} - - {/* Command history */} + {quickActions} 0}>
diff --git a/src/routes/401.tsx b/src/routes/401.tsx index 25b8d82..1906ec0 100644 --- a/src/routes/401.tsx +++ b/src/routes/401.tsx @@ -4,12 +4,10 @@ import { useLocation, useNavigate } from "@solidjs/router"; import { createSignal, onMount, onCleanup } from "solid-js"; import { glitchText } from "~/lib/client-utils"; import { TerminalErrorPage } from "~/components/TerminalErrorPage"; -import { useDarkMode } from "~/context/darkMode"; export default function Page_401() { const navigate = useNavigate(); const [glitch401, setGlitch401] = createSignal("401"); - const location = useLocation(); onMount(() => { @@ -60,9 +58,8 @@ export default function Page_401() {
); const quickActions = ( -
-
Quick actions:
- + <> + {" "} - - - - -
+ ); - let isDark: () => boolean; - try { - const darkMode = useDarkMode(); - isDark = darkMode.isDark; - } catch (e) { - isDark = () => true; - } return ( <> | Unauthorized Access } - commandContext={{ isDark }} /> ); diff --git a/src/routes/[...404].tsx b/src/routes/[...404].tsx index 28847c5..1d1690e 100644 --- a/src/routes/[...404].tsx +++ b/src/routes/[...404].tsx @@ -1,22 +1,19 @@ import { PageHead } from "~/components/PageHead"; import { HttpStatusCode } from "@solidjs/start"; -import { useNavigate, useLocation } from "@solidjs/router"; +import { useLocation, useNavigate } from "@solidjs/router"; import { createSignal, onCleanup, onMount, Show } from "solid-js"; import { TerminalErrorPage } from "~/components/TerminalErrorPage"; -import { useDarkMode } from "~/context/darkMode"; import { glitchText } from "~/lib/client-utils"; -// Component that crashes when rendered function CrashComponent() { throw new Error("Terminal crash test - triggering error boundary"); } export default function NotFound() { - const navigate = useNavigate(); - const location = useLocation(); - const { isDark } = useDarkMode(); const [glitch404, setGlitch404] = createSignal("404"); const [shouldCrash, setShouldCrash] = createSignal(false); + const navigate = useNavigate(); + const location = useLocation(); onMount(() => { const interval = glitchText(glitch404(), setGlitch404); @@ -67,33 +64,7 @@ export default function NotFound() { ); const quickActions = ( -
-
Quick commands:
- - - - - + <> -
+ ); return ( @@ -120,20 +91,17 @@ export default function NotFound() { /> setShouldCrash(true) + }} footer={ <> 404{" "} | Page Not Found } - commandContext={{ - triggerCrash: () => setShouldCrash(true), - isDark: isDark - }} /> );