fix: hide the global AI chat widget on /coming-soon
All checks were successful
build-and-release / build (push) Successful in 2m21s
All checks were successful
build-and-release / build (push) Successful in 2m21s
AiChatWidget renders unconditionally in the root layout for every route - looked out of place on the pre-launch marketing page (a floating chat bubble implying app functionality that doesn't exist yet). Hidden via a small route-exclusion set keyed off useLocation(), rather than threading a prop through every route. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
f51a94b777
commit
97f1b61979
1 changed files with 47 additions and 37 deletions
84
src/app.tsx
84
src/app.tsx
|
|
@ -1,52 +1,62 @@
|
|||
import { MetaProvider, Title } from "@solidjs/meta";
|
||||
import { Router } from "@solidjs/router";
|
||||
import { Router, useLocation } from "@solidjs/router";
|
||||
import { FileRoutes } from "@solidjs/start/router";
|
||||
import { ErrorBoundary, Suspense } from "solid-js";
|
||||
import { ErrorBoundary, Suspense, Show } from "solid-js";
|
||||
import { AuthProvider } from "~/lib/auth";
|
||||
import { AiChatWidget } from "~/components/AiChatWidget";
|
||||
import "./app.css";
|
||||
|
||||
// Standalone pre-launch pages that shouldn't show the logged-out-app chrome
|
||||
// (the AI chat widget assumes an app context - it doesn't make sense on a
|
||||
// pure marketing/waitlist page).
|
||||
const NO_CHAT_WIDGET_ROUTES = new Set(["/coming-soon"]);
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Router
|
||||
root={(props) => (
|
||||
<MetaProvider>
|
||||
<Title>Nxtgauge</Title>
|
||||
<AuthProvider>
|
||||
<ErrorBoundary
|
||||
fallback={(err) => (
|
||||
<main
|
||||
style={{
|
||||
padding: "24px",
|
||||
"font-family": "Inter, system-ui, sans-serif",
|
||||
color: "#111827",
|
||||
background: "#fff",
|
||||
}}
|
||||
>
|
||||
<h1 style={{ margin: 0, "font-size": "20px" }}>Frontend Error</h1>
|
||||
<p style={{ "margin-top": "8px" }}>
|
||||
A runtime error occurred while rendering this page.
|
||||
</p>
|
||||
<pre
|
||||
root={(props) => {
|
||||
const location = useLocation();
|
||||
return (
|
||||
<MetaProvider>
|
||||
<Title>Nxtgauge</Title>
|
||||
<AuthProvider>
|
||||
<ErrorBoundary
|
||||
fallback={(err) => (
|
||||
<main
|
||||
style={{
|
||||
"margin-top": "12px",
|
||||
padding: "12px",
|
||||
background: "#f3f4f6",
|
||||
"border-radius": "8px",
|
||||
"white-space": "pre-wrap",
|
||||
padding: "24px",
|
||||
"font-family": "Inter, system-ui, sans-serif",
|
||||
color: "#111827",
|
||||
background: "#fff",
|
||||
}}
|
||||
>
|
||||
{String((err as any)?.message || err)}
|
||||
</pre>
|
||||
</main>
|
||||
)}
|
||||
>
|
||||
<Suspense>{props.children}</Suspense>
|
||||
<AiChatWidget />
|
||||
</ErrorBoundary>
|
||||
</AuthProvider>
|
||||
</MetaProvider>
|
||||
)}
|
||||
<h1 style={{ margin: 0, "font-size": "20px" }}>Frontend Error</h1>
|
||||
<p style={{ "margin-top": "8px" }}>
|
||||
A runtime error occurred while rendering this page.
|
||||
</p>
|
||||
<pre
|
||||
style={{
|
||||
"margin-top": "12px",
|
||||
padding: "12px",
|
||||
background: "#f3f4f6",
|
||||
"border-radius": "8px",
|
||||
"white-space": "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{String((err as any)?.message || err)}
|
||||
</pre>
|
||||
</main>
|
||||
)}
|
||||
>
|
||||
<Suspense>{props.children}</Suspense>
|
||||
<Show when={!NO_CHAT_WIDGET_ROUTES.has(location.pathname)}>
|
||||
<AiChatWidget />
|
||||
</Show>
|
||||
</ErrorBoundary>
|
||||
</AuthProvider>
|
||||
</MetaProvider>
|
||||
);
|
||||
}}
|
||||
>
|
||||
<FileRoutes />
|
||||
</Router>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue