From 7248a1ddb149fe212d1b25124be6bc2acb2f5710 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 16 Mar 2024 17:02:57 +0200
Subject: [PATCH] Tournament logo+name in breadcrumbs

---
 app/components/layout/index.tsx               | 21 ++++++++++++++++---
 .../tournament/routes/to.$id.register.tsx     | 16 +-------------
 app/features/tournament/routes/to.$id.tsx     | 21 ++++++++++++++++++-
 app/styles/layout.css                         |  8 ++++++-
 app/utils/remix.ts                            |  8 ++++++-
 5 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index f0c3b28cf..ee6ede140 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -12,6 +12,7 @@ import { LinkButton } from "../Button";
 import { SUPPORT_PAGE } from "~/utils/urls";
 import { HeartIcon } from "../icons/Heart";
 import { useIsMounted } from "~/hooks/useIsMounted";
+import clsx from "clsx";
 
 function useBreadcrumbs() {
   const { t } = useTranslation();
@@ -66,7 +67,7 @@ export const Layout = React.memo(function Layout({
                 key={`${breadcrumb.href}-sep`}
                 className="layout__breadcrumb-separator"
               >
-                /
+                »
               </span>,
               <BreadcrumbLink key={breadcrumb.href} data={breadcrumb} />,
             ];
@@ -119,8 +120,22 @@ export const Layout = React.memo(function Layout({
 function BreadcrumbLink({ data }: { data: Breadcrumb }) {
   if (data.type === "IMAGE") {
     return (
-      <Link to={data.href} className="layout__breadcrumb">
-        <Image alt="" path={data.imgPath} width={30} height={30} />
+      <Link
+        to={data.href}
+        className={clsx("layout__breadcrumb", {
+          "stack horizontal sm items-center": data.text,
+        })}
+      >
+        <Image
+          className={clsx("layout__breadcrumb__image", {
+            "rounded-full": data.rounded,
+          })}
+          alt=""
+          path={data.imgPath}
+          width={24}
+          height={24}
+        />
+        {data.text}
       </Link>
     );
   }
diff --git a/app/features/tournament/routes/to.$id.register.tsx b/app/features/tournament/routes/to.$id.register.tsx
index 57b39e890..3e349c310 100644
--- a/app/features/tournament/routes/to.$id.register.tsx
+++ b/app/features/tournament/routes/to.$id.register.tsx
@@ -37,16 +37,10 @@ import { useAutoRerender } from "~/hooks/useAutoRerender";
 import { useIsMounted } from "~/hooks/useIsMounted";
 import type { ModeShort, StageId } from "~/modules/in-game-lists";
 import { rankedModesShort } from "~/modules/in-game-lists/modes";
-import {
-  notFoundIfFalsy,
-  parseRequestFormData,
-  validate,
-  type SendouRouteHandle,
-} from "~/utils/remix";
+import { notFoundIfFalsy, parseRequestFormData, validate } from "~/utils/remix";
 import { booleanToInt } from "~/utils/sql";
 import { assertUnreachable } from "~/utils/types";
 import {
-  CALENDAR_PAGE,
   LOG_IN_URL,
   SENDOU_INK_BASE_URL,
   navIconUrl,
@@ -86,14 +80,6 @@ import { filterOutFalsy } from "~/utils/arrays";
 import { MapPoolStages } from "~/components/MapPoolSelector";
 import { Section } from "~/components/Section";
 
-export const handle: SendouRouteHandle = {
-  breadcrumb: () => ({
-    imgPath: navIconUrl("calendar"),
-    href: CALENDAR_PAGE,
-    type: "IMAGE",
-  }),
-};
-
 export const action: ActionFunction = async ({ request, params }) => {
   const user = await requireUser(request);
   const data = await parseRequestFormData({ request, schema: registerSchema });
diff --git a/app/features/tournament/routes/to.$id.tsx b/app/features/tournament/routes/to.$id.tsx
index 8e143b258..26ed2f603 100644
--- a/app/features/tournament/routes/to.$id.tsx
+++ b/app/features/tournament/routes/to.$id.tsx
@@ -22,11 +22,15 @@ import { type SendouRouteHandle } from "~/utils/remix";
 import { makeTitle } from "~/utils/strings";
 import { assertUnreachable } from "~/utils/types";
 import { streamsByTournamentId } from "../core/streams.server";
-import { tournamentIdFromParams } from "../tournament-utils";
+import {
+  HACKY_resolvePicture,
+  tournamentIdFromParams,
+} from "../tournament-utils";
 import * as UserRepository from "~/features/user-page/UserRepository.server";
 import * as TournamentRepository from "~/features/tournament/TournamentRepository.server";
 import { databaseTimestampToDate } from "~/utils/dates";
 import { isAdmin } from "~/permissions";
+import { tournamentPage } from "~/utils/urls";
 
 import "../tournament.css";
 import "~/styles/maps.css";
@@ -42,6 +46,21 @@ export const meta: MetaFunction = (args) => {
 
 export const handle: SendouRouteHandle = {
   i18n: ["tournament", "calendar"],
+  breadcrumb: ({ match }) => {
+    const data = match.data as TournamentLoaderData | undefined;
+
+    if (!data) return [];
+
+    return [
+      {
+        imgPath: HACKY_resolvePicture(data.tournament.ctx),
+        href: tournamentPage(data.tournament.ctx.id),
+        type: "IMAGE",
+        text: data.tournament.ctx.name,
+        rounded: true,
+      },
+    ];
+  },
 };
 
 export type TournamentLoaderData = SerializeFrom<typeof loader>;
diff --git a/app/styles/layout.css b/app/styles/layout.css
index bc70f932a..aebed50d8 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -18,18 +18,24 @@
   overflow: hidden;
   max-width: 350px;
   color: var(--text);
-  font-size: var(--fonts-sm);
+  font-size: var(--fonts-xs);
   font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.layout__breadcrumb__image {
+  min-width: 24px;
+}
+
 .layout__breadcrumb.logo {
   overflow: initial;
 }
 
 .layout__breadcrumb-separator {
   font-size: 20px;
+  opacity: 0.4;
+  margin-inline-start: -1px;
 }
 
 .layout__item_size {
diff --git a/app/utils/remix.ts b/app/utils/remix.ts
index 023963a60..067be1d36 100644
--- a/app/utils/remix.ts
+++ b/app/utils/remix.ts
@@ -195,7 +195,13 @@ export function validate(
 }
 
 export type Breadcrumb =
-  | { imgPath: string; type: "IMAGE"; href: string }
+  | {
+      imgPath: string;
+      type: "IMAGE";
+      href: string;
+      text?: string;
+      rounded?: boolean;
+    }
   | { text: string; type: "TEXT"; href: string };
 
 /**