Upgrade dependencies

.env.example

@@ -4,5 +4,5 @@ STEAM_API_KEY=
 SECRETSECRET=
 # Planetscale DB URL
 DATABASE_URL=
-# The default Steam ID to use the auth token for public pages like the mission board
+# A default Steam ID to use the auth token for public pages like the mission board
 DEFAULT_STEAM_ID=

app/root.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, LoaderArgs } from "@remix-run/node"
+import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node"
 import { json } from "@remix-run/node"
 import {
 	Links,
@@ -60,7 +60,7 @@ function getLocale(request: Request): string {
 	return `${firstLang.code}-${firstLang.region.toLowerCase()}`
 }
 
-export let loader = async ({ request }: LoaderArgs) => {
+export let loader = async ({ request }: LoaderFunctionArgs) => {
 	const user = await authenticator.isAuthenticated(request)
 	const locale = getLocale(request)
 

app/routes/_pages.codex.blessings.$blessing.tsx

@@ -1,11 +1,11 @@
-import type { LoaderArgs } from "@remix-run/node"
+import type { LoaderFunctionArgs } from "@remix-run/node"
 import { json } from "@remix-run/node"
 import { useLoaderData } from "@remix-run/react"
 import { Img } from "~/components/Img"
 import { getItem } from "~/data/items.server"
 import { BlessingSchema } from "~/data/schemas.server"
 
-export const loader = async ({ params }: LoaderArgs) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
 	let item = await getItem(BlessingSchema, params.blessing || "NO PARAM?")
 	if (!item) {
 		throw new Response("Not Found", {

app/routes/_pages.codex.curios.$curio.tsx

@@ -1,11 +1,11 @@
-import type { LoaderArgs } from "@remix-run/node"
+import type { LoaderFunctionArgs } from "@remix-run/node"
 import { json } from "@remix-run/node"
 import { useLoaderData } from "@remix-run/react"
 import { Img } from "~/components/Img"
 import { getItem } from "~/data/items.server"
 import { CurioSchema } from "~/data/schemas.server"
 
-export const loader = async ({ params }: LoaderArgs) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
 	let item = await getItem(CurioSchema, params.curio || "NO PARAM?")
 	if (!item) {
 		throw new Response("Not Found", {

app/routes/_pages.codex.skins.$skin.tsx

@@ -1,11 +1,11 @@
-import type { LoaderArgs } from "@remix-run/node"
+import type { LoaderFunctionArgs } from "@remix-run/node"
 import { json } from "@remix-run/node"
 import { useLoaderData } from "@remix-run/react"
 import { Img } from "~/components/Img"
 import { getItem } from "~/data/items.server"
 import { SkinSchema } from "~/data/schemas.server"
 
-export const loader = async ({ params }: LoaderArgs) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
 	let item = await getItem(SkinSchema, params.skin || "NO PARAM?")
 	if (!item) {
 		throw new Response("Not Found", {

app/routes/_pages.codex.skins.tsx

@@ -1,5 +1,5 @@
 import { json } from "@remix-run/node"
-import type { LoaderArgs } from "@remix-run/node"
+import type { LoaderFunctionArgs } from "@remix-run/node"
 import { Link, useLoaderData, useOutlet } from "@remix-run/react"
 import { Form } from "~/components/Form"
 import { getItems } from "~/data/items.server"
@@ -10,7 +10,7 @@ import { Input } from "~/components/ui/input"
 import { Checkbox } from "~/components/ui/checkbox"
 import { Button } from "~/components/ui/button"
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const url = new URL(request.url)
 	const name = url.searchParams.get("name") ?? undefined
 	const showDescriptions = url.searchParams.has("descriptions")

app/routes/_pages.codex.weapons.$weapon.tsx

@@ -1,10 +1,10 @@
-import type { LoaderArgs } from "@remix-run/node"
+import type { LoaderFunctionArgs } from "@remix-run/node"
 import { json } from "@remix-run/node"
 import { useLoaderData } from "@remix-run/react"
 import { getItem } from "~/data/items.server"
 import { WeaponSchema } from "~/data/schemas.server"
 
-export const loader = async ({ params }: LoaderArgs) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
 	let weapon = await getItem(WeaponSchema, params.weapon || "NO WEAPON PARAM?")
 	if (!weapon) {
 		throw new Response("Not Found", {

app/routes/_pages.codex.weapons.tsx

@@ -1,4 +1,4 @@
-import type { LoaderArgs } from "@remix-run/node"
+import type { LoaderFunctionArgs } from "@remix-run/node"
 import { json } from "@remix-run/node"
 import { Link, useLoaderData, useOutlet } from "@remix-run/react"
 import { TagList } from "~/components/TagList"
@@ -13,7 +13,7 @@ import { Checkbox } from "~/components/ui/checkbox"
 import { titleCase } from "~/utils/titleCase"
 import { Button } from "~/components/ui/button"
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const url = new URL(request.url)
 	const item_type = getSearchParam(url.searchParams, "type", [
 		"melee",

app/routes/_pages.logout.ts

@@ -1,6 +1,6 @@
-import type { LoaderArgs } from "@remix-run/node"
+import type { LoaderFunctionArgs } from "@remix-run/node"
 import { authenticator } from "~/services/auth.server"
 
-export let loader = async ({ request }: LoaderArgs) => {
+export let loader = async ({ request }: LoaderFunctionArgs) => {
 	await authenticator.logout(request, { redirectTo: "/" })
 }

app/routes/_pages.settings.tsx

@@ -1,4 +1,4 @@
-import type { ActionArgs, LoaderArgs } from "@remix-run/node"
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node"
 import { json } from "@remix-run/node"
 import { deleteAuthToken, getAuthToken } from "~/services/db/authtoken.server"
 import { authenticator } from "~/services/auth.server"
@@ -7,7 +7,7 @@ import { Form, useLoaderData } from "@remix-run/react"
 import { TrashIcon } from "@heroicons/react/24/outline"
 import { Button } from "~/components/ui/button"
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
 	let user = await authenticator.isAuthenticated(request, {
 		failureRedirect: "/login",
 	})
@@ -24,7 +24,7 @@ export async function loader({ request }: LoaderArgs) {
 	return json({ title: "Settings", hasAuthToken })
 }
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	let user = await authenticator.isAuthenticated(request, {
 		failureRedirect: "/login",
 	})

app/routes/_pages.tsx

@@ -1,20 +1,29 @@
 import { Link, Outlet, useMatches } from "@remix-run/react"
 import { uniqBy } from "lodash-es"
+import { object, optional, string, parse } from "valibot"
+
+let PageData = object({
+	title: optional(string()),
+})
 
 export default function PageLayout() {
 	const matches = useMatches()
 
+	let currentPage = matches.at(-1) ?? { data: { title: "Home" } }
+	let currentPageData = parse(PageData, currentPage.data)
+
 	return (
 		<div className="h-full w-full overflow-scroll pb-16">
 			<header className="bg-background ">
-				<Title title={matches.at(-1)?.data?.title} />
+				<Title title={currentPageData.title} />
 				<Breadcrumbs
 					crumbs={uniqBy(matches, (match) => {
 						return match.pathname.replace(/\/$/, "")
 					}).map((match) => {
+						let pageData = parse(PageData, match.data)
 						return {
 							to: match.pathname,
-							label: match.data?.title || "Home",
+							label: pageData.title || "Home",
 						}
 					})}
 				/>
@@ -67,15 +76,9 @@ function Breadcrumbs({ crumbs }: { crumbs: { to: string; label: string }[] }) {
 	)
 }
 
-function Breadcrumb({
-	to,
-	label,
-	last,
-}: {
-	to: string
-	label: string
-	last?: boolean
-}) {
+function Breadcrumb(
+	{ to, label, last }: { to: string; label: string; last?: boolean },
+) {
 	return (
 		<li className="flex items-center">
 			<Link

app/routes/api.event.ts

@@ -1,8 +1,8 @@
-import type { ActionArgs } from "@remix-run/node"
+import type { ActionFunctionArgs } from "@remix-run/node"
 import { json } from "@remix-run/node"
-import { getClientIPAddress } from "remix-utils"
+import { getClientIPAddress } from "remix-utils/get-client-ip-address"
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	try {
 		const { origin } = new URL(request.url)
 		const analyticsHost = "https://plausible.io"
@@ -44,5 +44,5 @@ export async function loader() {
 	throw new Response(null, {
 		status: 404,
 		statusText: "Not Found",
-	});
+	})
 }

app/routes/api.gameplay_session.ts

@@ -1,4 +1,4 @@
-import type { ActionArgs } from "@remix-run/server-runtime"
+import type { ActionFunctionArgs } from "@remix-run/server-runtime"
 import { json } from "@remix-run/server-runtime"
 import { z } from "zod"
 import { saveGameplaySession } from "~/services/db/gameplaySessions.server"
@@ -9,7 +9,7 @@ let GameplaySessionSchema = z.object({
 	session_id: z.string(),
 })
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
 	let body = await request.json()
 	let { account_id, character_id, session_id } =
 		GameplaySessionSchema.parse(body)

app/routes/armoury.$character.$store.tsx

@@ -4,7 +4,7 @@ import {
 	useLoaderData,
 	useNavigation,
 } from "@remix-run/react"
-import type { ActionArgs, LoaderArgs } from "@remix-run/node"
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node"
 import { redirect, json } from "@remix-run/node"
 import { z } from "zod"
 import { zx } from "zodix"
@@ -45,7 +45,7 @@ let storeSlugToType: Record<string, "credits" | "marks"> = {
 	requisitorium: "marks",
 }
 
-export async function action({ params, request }: ActionArgs) {
+export async function action({ params, request }: ActionFunctionArgs) {
 	let { character: characterId, store: storeSlug } = zx.parseParams(params, {
 		character: z.string(),
 		store: z.string(),
@@ -117,7 +117,7 @@ let sort = function (a: number, b: number) {
 
 let EMPTY_RESULT = { offers: [], wallet: undefined }
 
-export async function loader({ request, params }: LoaderArgs) {
+export async function loader({ request, params }: LoaderFunctionArgs) {
 	let { character, store } = zx.parseParams(params, {
 		character: z.string(),
 		store: z.string(),

app/routes/armoury.$character.contracts.tsx

@@ -1,6 +1,6 @@
 import { CircleStackIcon, Square2StackIcon } from "@heroicons/react/24/outline"
 import { Form, useLoaderData, useNavigation } from "@remix-run/react"
-import type { ActionArgs, LoaderArgs } from "@remix-run/node"
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node"
 import { json } from "@remix-run/node"
 import { useEffect, useState } from "react"
 import { z } from "zod"
@@ -16,7 +16,7 @@ import {
 import { twMerge } from "tailwind-merge"
 import useLocale from "~/hooks/locale"
 
-export async function action({ params, request }: ActionArgs) {
+export async function action({ params, request }: ActionFunctionArgs) {
 	let { character: characterId } = zx.parseParams(params, {
 		character: z.string(),
 	})
@@ -67,7 +67,7 @@ function criteriaToDescription(criteria) {
 	}
 }
 
-export async function loader({ params, request }: LoaderArgs) {
+export async function loader({ params, request }: LoaderFunctionArgs) {
 	let { character: characterId } = zx.parseParams(params, {
 		character: z.string(),
 	})

app/routes/armoury.$character.inventory.$item.tsx

@@ -1,5 +1,5 @@
 // import { useLoaderData, useLocation } from "@remix-run/react"
-// import type { LoaderArgs } from "@remix-run/node"
+// import type { LoaderFunctionArgs } from "@remix-run/node"
 // import { redirect, json } from "@remix-run/node"
 // import { z } from "zod"
 // import { zx } from "zodix"
@@ -15,7 +15,7 @@
 // import { getWeaponTemplate } from "~/data/weaponTemplates.server"
 // import { twMerge } from "tailwind-merge"
 
-// export async function loader({ request, params }: LoaderArgs) {
+// export async function loader({ request, params }: LoaderFunctionArgs) {
 // 	let { character: characterId, item: itemId } = zx.parseParams(params, {
 // 		character: z.string(),
 // 		item: z.string(),

app/routes/armoury.$character.inventory.tsx

@@ -1,5 +1,5 @@
 import { useLoaderData, useParams } from "@remix-run/react"
-import type { LoaderArgs } from "@remix-run/server-runtime"
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime"
 import { json } from "@remix-run/server-runtime"
 import { z } from "zod"
 import { zx } from "zodix"
@@ -27,7 +27,7 @@ import {
 } from "~/components/ui/select"
 import { uniqBy } from "lodash-es"
 
-export async function loader({ request, params }: LoaderArgs) {
+export async function loader({ request, params }: LoaderFunctionArgs) {
 	let { character } = zx.parseParams(params, { character: z.string() })
 	let url = new URL(request.url)
 	let filterItemTypes = getSearchParam(url.searchParams, "type", [

app/routes/armoury.$character.sessions.$sessionId.tsx

@@ -1,13 +1,13 @@
 import { useLoaderData } from "@remix-run/react"
-import type { LoaderArgs } from "@remix-run/server-runtime"
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime"
 import { json } from "@remix-run/server-runtime"
 import { z } from "zod"
 import { zx } from "zodix"
 import { getAuthToken } from "~/services/db/authtoken.server"
 import { authenticator } from "~/services/auth.server"
 import { getGameplaySession } from "~/services/db/gameplaySessions.server"
 
-export async function loader({ params, request }: LoaderArgs) {
+export async function loader({ params, request }: LoaderFunctionArgs) {
 	let { character: characterId, sessionId } = zx.parseParams(params, {
 		character: z.string(),
 		sessionId: z.string(),

app/routes/armoury.$character.sessions.tsx

@@ -1,5 +1,5 @@
 import { Link, useLoaderData, useOutlet } from "@remix-run/react"
-import type { LoaderArgs } from "@remix-run/server-runtime"
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime"
 import { json } from "@remix-run/server-runtime"
 import { z } from "zod"
 import { zx } from "zodix"
@@ -16,7 +16,7 @@ import {
 import { getGameplaySessions } from "~/services/db/gameplaySessions.server"
 import useLocale from "~/hooks/locale"
 
-export async function loader({ params, request }: LoaderArgs) {
+export async function loader({ params, request }: LoaderFunctionArgs) {
 	let { character: characterId } = zx.parseParams(params, {
 		character: z.string(),
 	})

app/routes/armoury.$character.statistics.tsx

@@ -1,5 +1,5 @@
 import { useLoaderData } from "@remix-run/react"
-import type { LoaderArgs } from "@remix-run/server-runtime"
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime"
 import { json } from "@remix-run/server-runtime"
 import { z } from "zod"
 import { zx } from "zodix"
@@ -50,7 +50,7 @@ function explodeKeyTable(keyTable: unknown): Record<string, unknown>[] {
 	return result
 }
 
-export async function loader({ params, request }: LoaderArgs) {
+export async function loader({ params, request }: LoaderFunctionArgs) {
 	let { character: characterId } = zx.parseParams(params, {
 		character: z.string(),
 	})
@@ -190,13 +190,15 @@ function StatsTable({ children }: { children: React.ReactNode }) {
 	)
 }
 
-function AutoTable({
-	rows,
-	cols,
-}: {
-	rows: Record<string, unknown>[]
-	cols: { label: string; key: string }[]
-}) {
+function AutoTable(
+	{
+		rows,
+		cols,
+	}: {
+		rows: Record<string, unknown>[]
+		cols: { label: string; key: string }[]
+	},
+) {
 	if (!rows.length) {
 		return <div className="rounded-md border ">No results</div>
 	}