Skip to content

Commit 025c922

Browse files
bgwastubgwastu
committed
feat: Google-style search UX and keep error pages dark
Make home search feel like YouTube/Google (logo/X clear, floating suggestions, Esc dismiss) and wrap global/error surfaces in the shared dark theme so "Something went wrong" is never light.
1 parent b1b2109 commit 025c922

9 files changed

Lines changed: 432 additions & 264 deletions

File tree

‎src/app/LayoutWrapper.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { MantineProvider } from "@mantine/core";
55
import { Notifications } from "@mantine/notifications";
66
import { PlayerHost } from "@/components/PlayerHost";
77
import { AppProvider, useAppContext } from "@/context/AppContext";
8+
import { APP_BG } from "@/lib/theme";
89

910
/** 0 until first client microtask; keeps SSR/hydration first paint identical (placeholder). */
1011
let layoutHydrationBeacon = 0;
@@ -35,9 +36,7 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
3536
) > 0;
3637

3738
if (!ready) {
38-
return (
39-
<div style={{ backgroundColor: "#1A1B1E", height: "100dvh", width: "100%" }} />
40-
);
39+
return <div style={{ backgroundColor: APP_BG, height: "100dvh", width: "100%" }} />;
4140
}
4241

4342
return (

‎src/app/global-error.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
"use client";
22

33
import { useEffect } from "react";
4+
import { MantineProvider } from "@mantine/core";
45
import { ErrorScreen } from "@/components/ErrorScreen";
6+
import { APP_BG, appTheme } from "@/lib/theme";
57

68
export default function GlobalError({
79
error,
@@ -15,13 +17,15 @@ export default function GlobalError({
1517
}, [error]);
1618

1719
return (
18-
<html lang="en">
19-
<body style={{ margin: 0 }}>
20-
<ErrorScreen
21-
title="Something went wrong"
22-
message={error.message || "An unexpected error occurred."}
23-
onPrimary={reset}
24-
/>
20+
<html lang="en" style={{ colorScheme: "dark", backgroundColor: APP_BG }}>
21+
<body style={{ margin: 0, backgroundColor: APP_BG, colorScheme: "dark" }}>
22+
<MantineProvider withGlobalStyles withNormalizeCSS theme={appTheme}>
23+
<ErrorScreen
24+
title="Something went wrong"
25+
message={error.message || "An unexpected error occurred."}
26+
onPrimary={reset}
27+
/>
28+
</MantineProvider>
2529
</body>
2630
</html>
2731
);

‎src/app/layout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Metadata, Viewport } from "next";
2+
import { APP_BG } from "@/lib/theme";
23
import LayoutWrapper from "./LayoutWrapper";
34

45
export const viewport: Viewport = {
@@ -67,8 +68,8 @@ export const metadata: Metadata = {
6768

6869
export default function RootLayout({ children }: { children: React.ReactNode }) {
6970
return (
70-
<html lang="en">
71-
<body style={{ margin: 0 }}>
71+
<html lang="en" style={{ colorScheme: "dark", backgroundColor: APP_BG }}>
72+
<body style={{ margin: 0, backgroundColor: APP_BG, colorScheme: "dark" }}>
7273
<LayoutWrapper>{children}</LayoutWrapper>
7374
</body>
7475
</html>

‎src/app/not-found.tsx‎

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,55 @@
11
"use client";
22

33
import Link from "next/link";
4-
import { Button, Container, Flex, Paper, Text, Title } from "@mantine/core";
4+
import {
5+
Button,
6+
Container,
7+
Flex,
8+
Paper,
9+
Text,
10+
Title,
11+
useMantineTheme,
12+
} from "@mantine/core";
513
import { IconMapSearch } from "@tabler/icons-react";
14+
import { APP_BG } from "@/lib/theme";
615

716
export default function NotFound() {
17+
const theme = useMantineTheme();
18+
const bg = theme.colors.dark?.[7] ?? APP_BG;
19+
820
return (
9-
<Container size="xs">
10-
<Flex h="100dvh" align="center" justify="center" direction="column" gap="xl">
11-
<Paper
12-
p="xl"
13-
radius="md"
14-
withBorder
15-
style={{ width: "100%", textAlign: "center" }}
16-
>
17-
<Flex direction="column" align="center" gap="md">
18-
<IconMapSearch size={48} color="gray" />
19-
<Title order={2}>Page not found</Title>
20-
<Text c="dimmed" size="sm">
21-
The page you are looking for does not exist or was moved.
22-
</Text>
23-
<Button component={Link} href="/" variant="light" fullWidth mt="md">
24-
Go home
25-
</Button>
26-
</Flex>
27-
</Paper>
28-
</Flex>
29-
</Container>
21+
<div
22+
style={{
23+
minHeight: "100dvh",
24+
width: "100%",
25+
backgroundColor: bg,
26+
colorScheme: "dark",
27+
}}
28+
>
29+
<Container size="xs">
30+
<Flex h="100dvh" align="center" justify="center" direction="column" gap="xl">
31+
<Paper
32+
p="xl"
33+
radius="md"
34+
withBorder
35+
bg={theme.colors.dark[6]}
36+
style={{ width: "100%", textAlign: "center" }}
37+
>
38+
<Flex direction="column" align="center" gap="md">
39+
<IconMapSearch size={48} color={theme.colors.gray[5]} />
40+
<Title order={2} c="gray.0">
41+
Page not found
42+
</Title>
43+
<Text c="dimmed" size="sm">
44+
The page you are looking for does not exist or was moved.
45+
</Text>
46+
<Button component={Link} href="/" variant="light" fullWidth mt="md">
47+
Go home
48+
</Button>
49+
</Flex>
50+
</Paper>
51+
</Flex>
52+
</Container>
53+
</div>
3054
);
3155
}

0 commit comments

Comments
 (0)