New front page (#1938)

* Initial

* Progress

* Recent winners

* Add button

* Progress

* Mobile nav initial

* UI tweaks

* Overflow

* AnythingAdder links to places

* Remove color for tournament showcase

* Adjust SQ top banner based on if season is on right or not

* Tournament participant count fixed

* Log out

* todo

* Progress

* Nav complete

* Done?

* Fix lint

* Translate settings

.env.example

@@ -30,3 +30,5 @@ VITE_SKALOP_WS_URL=ws://localhost:5900
 
 // trunc, full or none (default: none)
 SQL_LOG=trunc
+
+USE_TEST_SEASONS=true

.gitignore

@@ -24,3 +24,5 @@ dump
 /playwright/.cache/
 
 .vscode
+
+notepad.txt

app/components/Avatar.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import * as React from "react";
 import type { User } from "~/db/types";
-import { BLANK_IMAGE_URL } from "~/utils/urls";
+import { BLANK_IMAGE_URL, discordAvatarUrl } from "~/utils/urls";
 
 const dimensions = {
 	xxxs: 16,
@@ -39,9 +39,11 @@ function _Avatar({
 	const src =
 		url ??
 		(user?.discordAvatar && !isErrored
-			? `https://cdn.discordapp.com/avatars/${user.discordId}/${
-					user.discordAvatar
-				}.webp${size === "lg" ? "?size=240" : "?size=80"}`
+			? discordAvatarUrl({
+					discordAvatar: user.discordAvatar,
+					discordId: user.discordId,
+					size: size === "lg" ? "lg" : "sm",
+				})
 			: BLANK_IMAGE_URL); // avoid broken image placeholder
 
 	return (

app/components/Catcher.tsx

@@ -1,4 +1,10 @@
-import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
+import {
+	isRouteErrorResponse,
+	useRevalidator,
+	useRouteError,
+} from "@remix-run/react";
+import * as React from "react";
+import { useCopyToClipboard, useLocation } from "react-use";
 import { Button } from "~/components/Button";
 import { useUser } from "~/features/auth/core/user";
 import {
@@ -12,8 +18,24 @@ import { Main } from "./Main";
 export function Catcher() {
 	const error = useRouteError();
 	const user = useUser();
+	const { revalidate } = useRevalidator();
+	const location = useLocation();
+	const [, copyToClipboard] = useCopyToClipboard();
+
+	// refresh user data to make sure it's up to date (e.g. cookie might have been removed, let's show the prompt to log back in)
+	React.useEffect(() => {
+		if (!isRouteErrorResponse(error) || error.status !== 401) return;
+
+		revalidate();
+	}, [revalidate, error]);
+
+	if (!isRouteErrorResponse(error)) {
+		const errorText = (() => {
+			if (!(error instanceof Error)) return;
+
+			return `Time: ${new Date().toISOString()}\nURL: ${location.href}\nUser ID: ${user?.id ?? "Not logged in"}\n${error.stack ?? error.message}`;
+		})();
 
-	if (!isRouteErrorResponse(error))
 		return (
 			<Main>
 				<Image
@@ -25,12 +47,24 @@ export function Catcher() {
 				/>
 				<h2 className="text-center">Error happened</h2>
 				<p className="text-center">
-					It seems like you encountered a bug. Sorry about that! Please report
-					details (your browser? what were you doing?) on{" "}
+					It seems like you encountered a bug. Sorry about that! Please share
+					the diagnostics message below as well as other details (your browser?
+					what were you doing?) on{" "}
 					<a href={SENDOU_INK_DISCORD_URL}>our Discord</a> so it can be fixed.
 				</p>
+				{errorText ? (
+					<>
+						<div className="mt-4 stack sm items-center">
+							<textarea readOnly>{errorText}</textarea>
+							<Button onClick={() => copyToClipboard(errorText)}>
+								Copy to clipboard
+							</Button>
+						</div>
+					</>
+				) : null}
 			</Main>
 		);
+	}
 
 	switch (error.status) {
 		case 401:

app/components/Main.tsx

@@ -1,9 +1,4 @@
-import {
-	isRouteErrorResponse,
-	useLocation,
-	useRouteError,
-} from "@remix-run/react";
-import { SideNav } from "app/components/layout/SideNav";
+import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
 import clsx from "clsx";
 import type * as React from "react";
 import { useUser } from "~/features/auth/core/user";
@@ -30,12 +25,8 @@ export const Main = ({
 		!user?.patronTier &&
 		!isRouteErrorResponse(error);
 
-	const location = useLocation();
-	const isFrontPage = location.pathname === "/";
-
 	return (
 		<div className="layout__main-container">
-			{!isFrontPage ? <SideNav /> : null}
 			<main
 				className={
 					classNameOverwrite

app/components/Menu.tsx

@@ -1,6 +1,7 @@
 import { Menu as HeadlessUIMenu, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import * as React from "react";
+import { Image } from "./Image";
 
 export interface MenuProps {
 	button: React.ElementType;
@@ -9,15 +10,23 @@ export interface MenuProps {
 		text: string;
 		id: string | number;
 		icon?: React.ReactNode;
+		imagePath?: string;
 		onClick: () => void;
 		disabled?: boolean;
 		selected?: boolean;
 	}[];
 	className?: string;
 	scrolling?: boolean;
+	opensLeft?: boolean;
 }
 
-export function Menu({ button, items, className, scrolling }: MenuProps) {
+export function Menu({
+	button,
+	items,
+	className,
+	scrolling,
+	opensLeft,
+}: MenuProps) {
 	return (
 		<HeadlessUIMenu as="div" className={clsx("menu-container", className)}>
 			<HeadlessUIMenu.Button as={button} />
@@ -33,6 +42,7 @@ export function Menu({ button, items, className, scrolling }: MenuProps) {
 				<HeadlessUIMenu.Items
 					className={clsx("menu__items-container", {
 						"menu-container__scrolling": scrolling,
+						"menu__items-container__opens-left": opensLeft,
 					})}
 				>
 					{items.map((item) => {
@@ -52,6 +62,15 @@ export function Menu({ button, items, className, scrolling }: MenuProps) {
 										{item.icon ? (
 											<span className="menu__item__icon">{item.icon}</span>
 										) : null}
+										{item.imagePath ? (
+											<Image
+												path={item.imagePath}
+												alt=""
+												width={24}
+												height={24}
+												className="menu__item__img"
+											/>
+										) : null}
 										{item.text}
 									</button>
 								)}

app/components/NewTabs.tsx

@@ -6,6 +6,7 @@ interface NewTabsProps {
 	tabs: {
 		label: string;
 		number?: number;
+		icon?: React.ReactNode;
 		hidden?: boolean;
 		disabled?: boolean;
 	}[];
@@ -20,6 +21,10 @@ interface NewTabsProps {
 	setSelectedIndex?: (index: number) => void;
 	/** Don't take space when no tabs to show? */
 	disappearing?: boolean;
+	/** Show padding between tabs and content
+	 * @default true
+	 */
+	padded?: boolean;
 	type?: "divider";
 	sticky?: boolean;
 }
@@ -36,6 +41,7 @@ export function NewTabs(args: NewTabsProps) {
 		selectedIndex,
 		setSelectedIndex,
 		disappearing = false,
+		padded = true,
 	} = args;
 
 	const cantSwitchTabs = tabs.filter((t) => !t.hidden).length <= 1;
@@ -60,6 +66,7 @@ export function NewTabs(args: NewTabsProps) {
 								data-testid={`tab-${tab.label}`}
 								disabled={tab.disabled}
 							>
+								{tab.icon}
 								{tab.label}
 								{typeof tab.number === "number" && tab.number !== 0 && (
 									<span className="tab__number">{tab.number}</span>
@@ -69,7 +76,9 @@ export function NewTabs(args: NewTabsProps) {
 					})}
 			</Tab.List>
 			<Tab.Panels
-				className={clsx({ "mt-4": !cantSwitchTabs || !disappearing })}
+				className={clsx({
+					"mt-4": padded && (!cantSwitchTabs || !disappearing),
+				})}
 			>
 				{content
 					.filter((c) => !c.hidden)

app/components/form/MyForm.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import type { z } from "zod";
-import type { ActionError } from "~/utils/remix";
+import type { ActionError } from "~/utils/remix.server";
 import { SubmitButton } from "../SubmitButton";
 
 export function MyForm<T extends z.ZodTypeAny>({

app/components/icons/Hamburger.tsx

@@ -0,0 +1,23 @@
+export function HamburgerIcon({
+	className,
+}: {
+	className?: string;
+}) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth={2}
+			stroke="currentColor"
+			className={className}
+		>
+			<title>Hamburger icon</title>
+			<path
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+			/>
+		</svg>
+	);
+}

app/components/icons/Key.tsx

@@ -0,0 +1,17 @@
+export function KeyIcon({ className }: { className?: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			className={className}
+		>
+			<title>Key Icon</title>
+			<path
+				fillRule="evenodd"
+				d="M15.75 1.5a6.75 6.75 0 0 0-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 0 0-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 0 0 .75-.75v-1.5h1.5A.75.75 0 0 0 9 19.5V18h1.5a.75.75 0 0 0 .53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1 0 15.75 1.5Zm0 3a.75.75 0 0 0 0 1.5A2.25 2.25 0 0 1 18 8.25a.75.75 0 0 0 1.5 0 3.75 3.75 0 0 0-3.75-3.75Z"
+				clipRule="evenodd"
+			/>
+		</svg>
+	);
+}