New bgs and fix toasts

src/app/PageBackground.tsx

@@ -2,15 +2,16 @@
 
 import { useEffect, useState } from 'react';
 
-const images = ['anniversary', 'gnarlmoon', 'anomalus', 'druid'];
+const images = ['anniversary', 'hunter', 'gnarlmoon', 'anomalus', 'druid'];
 
 const PageBackground = () => {
 	const [image, setImage] = useState(0);
 
 	useEffect(() => {
 		if (typeof window === 'undefined') return;
 		const interval = setInterval(() => {
-			setImage(Math.floor(Math.random() * images.length));
+			const rnd = Math.floor(Math.random() * (images.length - 1));
+			setImage(rnd >= image ? rnd + 1 : rnd);
 		}, 30000);
 		return () => clearInterval(interval);
 	}, [image]);
@@ -19,7 +20,7 @@ const PageBackground = () => {
 		<div
 			className="pointer-events-none fixed left-1/2 top-0 -z-10 aspect-video w-full min-w-[1024px] -translate-x-1/2 bg-cover bg-top bg-no-repeat opacity-50 transition-all duration-[2000ms]"
 			style={{
-				backgroundImage: `url("/${images[image]}.webp")`,
+				backgroundImage: `url("/bgs/${images[image]}.webp")`,
 				maskImage: 'linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0))'
 			}}
 		/>

src/app/Providers.tsx

@@ -3,44 +3,16 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SessionProvider } from 'next-auth/react';
 import { type PropsWithChildren } from 'react';
-import { Toaster, resolveValue } from 'react-hot-toast';
-import { AlertCircle, CheckCircle, ClipboardCopy } from 'lucide-react';
 
-import TextButton from '~/components/styled/TextButton';
+import ToastProvider from '~/components/ToastProvider';
 
 const queryClient = new QueryClient();
 
 const Providers = ({ children }: PropsWithChildren) => (
 	<SessionProvider>
 		<QueryClientProvider client={queryClient}>
 			{children}
-			<Toaster>
-				{t => {
-					const msgString = typeof t.message === 'string' ? t.message : '';
-					return (
-						<div className="tw-surface flex max-w-sm items-center gap-2 bg-darkGray">
-							{t.type === 'error' && (
-								<AlertCircle size={18} className="shrink-0 text-red" />
-							)}
-							{t.type === 'success' && (
-								<CheckCircle size={18} className="shrink-0 text-green" />
-							)}
-							<p title={msgString} className="truncate">
-								{resolveValue(t.message, t)}
-							</p>
-
-							{t.type === 'error' && msgString && (
-								<TextButton
-									title="Copy message"
-									onClick={() => navigator.clipboard.writeText(msgString)}
-									icon={ClipboardCopy}
-									className="-m-2 shrink-0"
-								/>
-							)}
-						</div>
-					);
-				}}
-			</Toaster>
+			<ToastProvider />
 		</QueryClientProvider>
 	</SessionProvider>
 );

src/components/ToastProvider.tsx

@@ -0,0 +1,36 @@
+import { AlertCircle, CheckCircle, ClipboardCopy } from 'lucide-react';
+import { Toaster, resolveValue } from 'react-hot-toast';
+
+import TextButton from './styled/TextButton';
+
+const ToastProvider = () => (
+	<Toaster>
+		{t => {
+			const msgString = typeof t.message === 'string' ? t.message : '';
+			return (
+				<div className="tw-surface flex max-w-sm items-center gap-2 bg-darkGray">
+					{t.type === 'error' && (
+						<AlertCircle size={18} className="shrink-0 text-red" />
+					)}
+					{t.type === 'success' && (
+						<CheckCircle size={18} className="shrink-0 text-green" />
+					)}
+					<p title={msgString} className="truncate">
+						{resolveValue(t.message, t)}
+					</p>
+
+					{t.type === 'error' && msgString && (
+						<TextButton
+							title="Copy message"
+							onClick={() => navigator.clipboard.writeText(msgString)}
+							icon={ClipboardCopy}
+							className="-m-2 shrink-0"
+						/>
+					)}
+				</div>
+			);
+		}}
+	</Toaster>
+);
+
+export default ToastProvider;

src/components/styled/DialogButton.tsx

@@ -10,6 +10,8 @@ import {
 } from 'react';
 import { createPortal } from 'react-dom';
 
+import ToastProvider from '../ToastProvider';
+
 type Props = {
 	clickAway?: boolean;
 	noBlur?: boolean;
@@ -77,6 +79,7 @@ const DialogButton = ({
 						)}
 					>
 						{typeof dialog === 'function' ? dialog(close) : dialog}
+						<ToastProvider />
 					</dialog>,
 					document.body
 				)}