continued cleanup

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 = (
-    <div class="mb-8 w-full max-w-4xl space-y-3 font-mono text-sm">
+    <>
-      <div class="text-subtext1">Quick actions:</div>
-
       <button
         onClick={() => props.reset()}
-        class="group border-surface0 bg-mantle hover:border-yellow hover:bg-surface0 flex w-full items-center gap-2 border px-4 py-3 text-left transition-all"
+        class="group border-surface0 bg-mantle hover:border-yellow hover:bg-surface0 flex w-full cursor-pointer items-center gap-2 border px-4 py-3 text-left transition-all"
       >
         <span class="text-green">$</span>
         <span class="text-yellow group-hover:text-peach">./reset</span>
@@ -97,39 +76,11 @@ export default function ErrorBoundaryFallback(
           [Try again]
         </span>
       </button>
-
+    </>
-      <button
-        onClick={() => navigate!("/")}
-        class="group border-surface0 bg-mantle hover:border-blue hover:bg-surface0 flex w-full items-center gap-2 border px-4 py-3 text-left transition-all"
-      >
-        <span class="text-green">$</span>
-        <span class="text-blue group-hover:text-sky">cd</span>
-        <span class="text-text group-hover:text-blue">~</span>
-        <span class="text-subtext1 ml-auto opacity-0 transition-opacity group-hover:opacity-100">
-          [Return home]
-        </span>
-      </button>
-
-      <button
-        onClick={() => window.history.back()}
-        class="group border-surface0 bg-mantle hover:border-blue hover:bg-surface0 flex w-full items-center gap-2 border px-4 py-3 text-left transition-all"
-      >
-        <span class="text-green">$</span>
-        <span class="text-blue group-hover:text-sky">cd</span>
-        <span class="text-text group-hover:text-blue">..</span>
-        <span class="text-subtext1 ml-auto opacity-0 transition-opacity group-hover:opacity-100">
-          [Go back]
-        </span>
-      </button>
-    </div>
   );
 
   return (
     <TerminalErrorPage
-      navigate={navigate!}
-      location={{
-        pathname: typeof window !== "undefined" ? window.location.pathname : "/"
-      }}
       errorContent={errorContent}
       quickActions={quickActions}
       footer={
@@ -138,7 +89,6 @@ export default function ErrorBoundaryFallback(
           Runtime Exception
         </>
       }
-      commandContext={{ isDark }}
     />
   );
 }

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,
+    navigate,
-    location: props.location,
+    location,
     addToHistory,
     openBtop: () => setBtopOpen(true),
+    isDark: isDark,
     ...props.commandContext
   });
 
@@ -98,12 +102,42 @@ export function TerminalErrorPage(props: TerminalErrorPageProps) {
     inputRef?.focus();
   });
 
+  const quickActions = (
+    <div class="mb-8 w-full max-w-4xl space-y-3 font-mono text-sm">
+      <div class="text-subtext1">Quick actions:</div>
+      {props.quickActions}
+
+      <button
+        onClick={() => navigate!("/")}
+        class="group border-surface0 bg-mantle hover:border-blue hover:bg-surface0 flex w-full cursor-pointer items-center gap-2 border px-4 py-3 text-left transition-all"
+      >
+        <span class="text-green">$</span>
+        <span class="text-blue group-hover:text-sky">cd</span>
+        <span class="text-text group-hover:text-blue">~</span>
+        <span class="text-subtext1 ml-auto opacity-0 transition-opacity group-hover:opacity-100">
+          [Return home]
+        </span>
+      </button>
+
+      <button
+        onClick={() => window.history.back()}
+        class="group border-surface0 bg-mantle hover:border-blue hover:bg-surface0 flex w-full cursor-pointer items-center gap-2 border px-4 py-3 text-left transition-all"
+      >
+        <span class="text-green">$</span>
+        <span class="text-blue group-hover:text-sky">cd</span>
+        <span class="text-text group-hover:text-blue">..</span>
+        <span class="text-subtext1 ml-auto opacity-0 transition-opacity group-hover:opacity-100">
+          [Go back]
+        </span>
+      </button>
+    </div>
+  );
+
   return (
     <div
       class={`relative min-h-screen w-full overflow-hidden`}
       onClick={() => inputRef?.focus()}
     >
-      {/* Scanline effect */}
       <div class="pointer-events-none absolute inset-0 z-20 opacity-5">
         <div
           class="h-full w-full"
@@ -115,17 +149,9 @@ export function TerminalErrorPage(props: TerminalErrorPageProps) {
         />
       </div>
 
-      {/* Main content */}
       <div class="relative z-10 flex min-h-screen flex-col items-start justify-start px-4 py-16 lg:px-16">
-        {/* Terminal header */}
-
-        {/* Error Content - passed as prop */}
         {props.errorContent}
-
+        {quickActions}
-        {/* Quick Actions - passed as prop */}
-        {props.quickActions}
-
-        {/* Command history */}
         <Show when={history().length > 0}>
           <div class="mb-4 w-full max-w-4xl font-mono text-sm">
             <For each={history()}>

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() {
     </div>
   );
   const quickActions = (
-    <div class="mb-8 w-full max-w-4xl space-y-3 font-mono text-sm">
+    <>
-      <div class="text-subtext1">Quick actions:</div>
+      {" "}
-
       <button
         onClick={() => navigate("/login")}
         class="group border-surface0 bg-mantle hover:border-yellow hover:bg-surface0 flex w-full items-center gap-2 border px-4 py-3 text-left transition-all"
@@ -74,40 +71,9 @@ export default function Page_401() {
           [Login]
         </span>
       </button>
-
+    </>
-      <button
-        onClick={() => navigate("/")}
-        class="group border-surface0 bg-mantle hover:border-blue hover:bg-surface0 flex w-full items-center gap-2 border px-4 py-3 text-left transition-all"
-      >
-        <span class="text-green">$</span>
-        <span class="text-blue group-hover:text-sky">cd</span>
-        <span class="text-text group-hover:text-blue">~</span>
-        <span class="text-subtext1 ml-auto opacity-0 transition-opacity group-hover:opacity-100">
-          [Return home]
-        </span>
-      </button>
-
-      <button
-        onClick={() => window.history.back()}
-        class="group border-surface0 bg-mantle hover:border-blue hover:bg-surface0 flex w-full items-center gap-2 border px-4 py-3 text-left transition-all"
-      >
-        <span class="text-green">$</span>
-        <span class="text-blue group-hover:text-sky">cd</span>
-        <span class="text-text group-hover:text-blue">..</span>
-        <span class="text-subtext1 ml-auto opacity-0 transition-opacity group-hover:opacity-100">
-          [Go back]
-        </span>
-      </button>
-    </div>
   );
 
-  let isDark: () => boolean;
-  try {
-    const darkMode = useDarkMode();
-    isDark = darkMode.isDark;
-  } catch (e) {
-    isDark = () => true;
-  }
   return (
     <>
       <PageHead
@@ -116,8 +82,6 @@ export default function Page_401() {
       />
       <HttpStatusCode code={401} />
       <TerminalErrorPage
-        navigate={navigate}
-        location={location}
         errorContent={errorContent}
         quickActions={quickActions}
         disableTerminal
@@ -127,7 +91,6 @@ export default function Page_401() {
             <span class="text-subtext0">|</span> Unauthorized Access
           </>
         }
-        commandContext={{ isDark }}
       />
     </>
   );

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 = (
-    <div class="mb-8 w-full max-w-4xl space-y-3 font-mono text-sm">
+    <>
-      <div class="text-subtext1">Quick commands:</div>
-
-      <button
-        onClick={() => navigate("/")}
-        class="group border-surface0 bg-mantle hover:border-blue hover:bg-surface0 flex w-full items-center gap-2 border px-4 py-3 text-left transition-all"
-      >
-        <span class="text-green">$</span>
-        <span class="text-blue group-hover:text-sky">cd</span>
-        <span class="text-text group-hover:text-blue">~</span>
-        <span class="text-subtext1 ml-auto opacity-0 transition-opacity group-hover:opacity-100">
-          [Return home]
-        </span>
-      </button>
-
-      <button
-        onClick={() => window.history.back()}
-        class="group border-surface0 bg-mantle hover:border-blue hover:bg-surface0 flex w-full items-center gap-2 border px-4 py-3 text-left transition-all"
-      >
-        <span class="text-green">$</span>
-        <span class="text-blue group-hover:text-sky">cd</span>
-        <span class="text-text group-hover:text-blue">..</span>
-        <span class="text-subtext1 ml-auto opacity-0 transition-opacity group-hover:opacity-100">
-          [Go back]
-        </span>
-      </button>
-
       <button
         onClick={() => navigate("/blog")}
         class="group border-surface0 bg-mantle hover:border-blue hover:bg-surface0 flex w-full items-center gap-2 border px-4 py-3 text-left transition-all"
@@ -105,7 +76,7 @@ export default function NotFound() {
           [View blog]
         </span>
       </button>
-    </div>
+    </>
   );
 
   return (
@@ -120,20 +91,17 @@ export default function NotFound() {
       />
       <HttpStatusCode code={404} />
       <TerminalErrorPage
-        navigate={navigate}
-        location={location}
         errorContent={errorContent}
         quickActions={quickActions}
+        commandContext={{
+          triggerCrash: () => setShouldCrash(true)
+        }}
         footer={
           <>
             <span class="text-red">404</span>{" "}
             <span class="text-subtext0">|</span> Page Not Found
           </>
         }
-        commandContext={{
-          triggerCrash: () => setShouldCrash(true),
-          isDark: isDark
-        }}
       />
     </>
   );