kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

skeletons, tournament stats, polish, bug fixes

Browse Source
This commit is contained in:
yohlo
2025-09-23 14:48:04 -05:00
parent 7ff26229d9
commit 7441d1ac58
36 changed files with 990 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/components/DefaultCatchBoundary.tsx
View File

@@ -7,23 +7,22 @@ import {
redirect,
} from '@tanstack/react-router'
import type { ErrorComponentProps } from '@tanstack/react-router'
import {
Box,
import {
Box,
Button as MantineButton,
Text,
Title,
Stack,
Group,
Alert,
Text,
Stack,
Group,
Collapse,
Code,
ThemeIcon
Container,
Center
} from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'
import { useEffect } from 'react'
import toast from '@/lib/sonner'
import { logger } from '@/lib/logger'
import { ExclamationMarkIcon, XCircleIcon } from '@phosphor-icons/react'
import { XCircleIcon, WarningIcon } from '@phosphor-icons/react'
import Button from './button'
export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
@@ -50,112 +49,90 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
if (errorMessage.toLowerCase().includes('unauthorized')) {
return (
<Box
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '50vh',
padding: 'var(--mantine-spacing-xl)',
}}
>
<Stack align="center" gap="lg">
<ThemeIcon color="red" size={80} radius="xl">
<XCircleIcon size={48} />
</ThemeIcon>
<Title order={2} ta="center">Access Denied</Title>
<Text size="lg" c="dimmed" ta="center">
You don't have permission to access this.
</Text>
<Group>
<Button
variant="light"
onClick={() => window.history.back()}
>
Go Back
</Button>
<MantineButton
component={Link}
to="/"
variant="filled"
>
Home
</MantineButton>
</Group>
</Stack>
</Box>
<Container size="sm" py="xl">
<Center>
<Stack align="center" gap="md">
<XCircleIcon size={64} color="var(--mantine-color-red-6)" />
<Text size="xl" fw={600}>Access Denied</Text>
<Text c="dimmed" ta="center">
You don't have permission to access this page.
</Text>
<Group gap="sm" mt="md">
<Button
variant="light"
onClick={() => window.history.back()}
>
Go Back
</Button>
<MantineButton
component={Link}
to="/"
variant="filled"
>
Home
</MantineButton>
</Group>
</Stack>
</Center>
</Container>
)
}
return (
<Box
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '50vh',
padding: 'var(--mantine-spacing-xl)',
}}
>
<Stack align="center" gap="lg" maw={600}>
<ThemeIcon color="red" size={80} radius="xl">
<ExclamationMarkIcon size={48} />
</ThemeIcon>
<Title order={2} ta="center">Something went wrong</Title>
<Text size="lg" c="dimmed" ta="center">
There was an unexpected error. Please try again later.
</Text>
<Container size="sm" py="xl">
<Center>
<Stack align="center" gap="md" w="100%">
<WarningIcon size={64} color="var(--mantine-color-red-6)" />
<Alert
variant="light"
color="red"
title="Error Details"
w="100%"
>
<Text mb="sm">{errorMessage}</Text>
<Button
variant="subtle"
size="compact-sm"
onClick={toggleDetails}
>
{detailsOpened ? 'Hide' : 'Show'} stack trace
</Button>
<Collapse in={detailsOpened}>
<Code block mt="md" p="md">
{errorStack}
</Code>
</Collapse>
</Alert>
<Text size="xl" fw={600}>Something went wrong</Text>
<Group>
<Button
variant="light"
onClick={() => router.invalidate()}
>
Try Again
</Button>
{isRoot ? (
<MantineButton
component={Link}
to="/"
variant="filled"
>
Home
</MantineButton>
) : (
<Text c="dimmed" ta="center">
An error occurred while loading this page.
</Text>
<Box w="100%" mt="md">
<Text size="sm" c="dimmed" mb="xs">Error: {errorMessage}</Text>
<Button
variant="filled"
onClick={() => window.history.back()}
variant="subtle"
size="compact-sm"
onClick={toggleDetails}
fullWidth
>
Go Back
{detailsOpened ? 'Hide' : 'Show'} details
</Button>
)}
</Group>
</Stack>
</Box>
<Collapse in={detailsOpened}>
<Code block mt="sm" p="sm" style={{ fontSize: '11px' }}>
{errorStack}
</Code>
</Collapse>
</Box>
<Group gap="sm" mt="lg">
<Button
variant="light"
onClick={() => router.invalidate()}
>
Retry
</Button>
{isRoot ? (
<MantineButton
component={Link}
to="/"
variant="filled"
>
Home
</MantineButton>
) : (
<Button
variant="filled"
onClick={() => window.history.back()}
>
Go Back
</Button>
)}
</Group>
</Stack>
</Center>
</Container>
)
}

10
src/components/stats-overview.tsx
View File

@@ -50,9 +50,13 @@ const StatItem = ({
{label}
</Text>
</Group>
<Text size="sm" fw={700} c="dimmed">
{value !== null ? `${value}${suffix}` : <Skeleton width={20} height={20} />}
</Text>
{value !== null ? (
<Text size="sm" fw={700} c="dimmed">
{`${value}${suffix}`}
</Text>
) : (
<Skeleton width={20} height={20} />
)}
</Group>
);
};

7
src/components/swipeable-tabs.tsx
View File

@@ -101,20 +101,23 @@ function SwipeableTabs({
useEffect(() => {
const timeoutId = setTimeout(updateHeight, 0);
return () => clearTimeout(timeoutId);
});
}, [updateHeight]);
useEffect(() => {
const activeSlideRef = slideRefs.current[activeTab];
if (!activeSlideRef) return;
let timeoutId: number;
const resizeObserver = new ResizeObserver(() => {
updateHeight();
clearTimeout(timeoutId);
timeoutId = setTimeout(updateHeight, 16);
});
resizeObserver.observe(activeSlideRef);
return () => {
resizeObserver.disconnect();
clearTimeout(timeoutId);
};
}, [activeTab, updateHeight]);