continued cleanup

2026-01-06 18:18:04 -05:00
parent aedcacaa57
commit dec4162baf
4 changed files with 54 additions and 147 deletions
--- 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 = (
-    <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 }}
    />
  );
 }
--- 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 = (
+    <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}
-
-        {/* Quick Actions - passed as prop */}
-        {props.quickActions}
-
-        {/* Command history */}
+        {quickActions}
        <Show when={history().length > 0}>
          <div class="mb-4 w-full max-w-4xl font-mono text-sm">
            <For each={history()}>
--- 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() {
    </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 }}
      />
    </>
  );
--- 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 = (
-    <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
-        }}
      />
    </>
  );