fixes: cleanup things and added a title on every page

frontend/index.html

@@ -36,7 +36,7 @@
 			<a href="/signin" class="hover:bg-gray-700 rounded-md px-3 py-2">👤 Signin</a>
 			<a href="/ttt" class="hover:bg-gray-700 rounded-md px-3 py-2">⭕ Tic-Tac-Toe</a>
 			<a href="/pong" class="hover:bg-gray-700 rounded-md px-3 py-2">▮•▮ Ping Pong</a>
-			<a href="/contact" class="hover:bg-gray-700 rounded-md px-3 py-2">⚙️ Settings</a>
+			<a href="/tour" class="hover:bg-gray-700 rounded-md px-3 py-2">🏆 Tournaments</a>
 			<a href="/logout" class="hover:bg-gray-700 rounded-md px-3 py-2">🚪 Logout</a>
 		</nav>
 	</aside>

frontend/src/auth.ts

@@ -2,7 +2,7 @@ import { showError } from "@app/toast";
 import client from "@app/api";
 import cookie from "js-cookie";
 import { ensureWindowState, isNullish } from "@app/utils";
-import { navigateTo } from "./routing";
+import { handleRoute, navigateTo } from "./routing";
 
 
 cookie.remove("pkce");
@@ -28,6 +28,7 @@ declare module "ft_state" {
 	interface State {
 		user: User | null;
 		_headerProfile: boolean;
+		_reloadOnAuthChange: boolean;
 	}
 }
 
@@ -95,6 +96,12 @@ if (!window.__state._headerProfile) {
 	});
 	window.__state._headerProfile = true;
 }
+
+window.__state._reloadOnAuthChange ??= false;
+if (!window.__state._reloadOnAuthChange) {
+	document.addEventListener("ft:userChange", () => handleRoute());
+	window.__state._reloadOnAuthChange = true;
+}
 updateHeaderProfile();
 
 Object.assign(window as any, { getUser, setUser, updateUser, isLogged });

frontend/src/pages/about/about.ts

@@ -1,12 +0,0 @@
-import { addRoute, setTitle } from "@app/routing";
-import page from './about.html?raw'
-
-
-async function route(_url: string, _args: { [k: string]: string }): Promise<string> {
-	setTitle('About us')
-	return page;
-}
-
-
-
-addRoute('/about', route)

frontend/src/pages/pong/pong.ts

@@ -79,7 +79,7 @@ function pongClient(
 	_url: string,
 	_args: RouteHandlerParams,
 ): RouteHandlerReturn {
-	setTitle("Pong Game Page");
+	setTitle("Pong Game");
 	const urlParams = new URLSearchParams(window.location.search);
 	let game_req_join = urlParams.get("game");
 	// todo:

frontend/src/pages/pongHistory/pongHistory.ts

@@ -1,8 +1,9 @@
-import { addRoute, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
+import { addRoute, navigateTo, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
 import page from './pongHistory.html?raw';
 import { isNullish } from "@app/utils";
 import client from "@app/api";
 import { updateUser } from "@app/auth";
+import { showError } from "@app/toast";
 
 
 function getHHMM(d: Date): string {
@@ -12,23 +13,23 @@ function getHHMM(d: Date): string {
 }
 
 async function pongHistory(_url: string, args: RouteHandlerParams): Promise<RouteHandlerReturn> {
+	setTitle("Pong Matches");
 	if (isNullish(args.userid))
 		args.userid = 'me';
 	let user = await updateUser();
 	if (isNullish(user)) {
-		return { html: '<span> You aren\'t logged in </span>' };
+		return { html: '<span> You aren\'t logged in </span>', postInsert: () => { showError("You must be logged in !"); navigateTo("/") } };
 	}
 
-	let userInfoRes = await client.getUser({user: args.userid});
+	let userInfoRes = await client.getUser({ user: args.userid });
-	if (userInfoRes.kind !== 'success')
+	if (userInfoRes.kind !== 'success') {
-	{
+		return { html: '<span> You tried to open a game history with no data :(</span>', postInsert: () => { showError("We found no data"); navigateTo("/") } };
-		return { html: '<span> You tried to open a game history with no data :(</span>' };
 	}
 	let userInfo = userInfoRes.payload;
 	let res = await client.pongHistory({ user: args.userid });
 	if (res.kind === 'failure' || res.kind === 'notLoggedIn') {
 		// todo: make a real page on no data
-		return { html: '<span> You tried to open a game history with no data :(</span>' };
+		return { html: '<span> You tried to open a game history with no data :(</span>', postInsert: () => { showError("We found no data"); navigateTo("/") } };
 	}
 	let games = res.payload.data;
 	games.reverse();

frontend/src/pages/tourHistory/tourHistory.ts

@@ -1,4 +1,4 @@
-import { addRoute, navigateTo, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
+import { addRoute, navigateTo, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
 import pageAll from './tourHistoryAll.html?raw';
 import pageSingle from './tourHistorySingle.html?raw';
 import { isNullish } from "@app/utils";
@@ -14,7 +14,7 @@ function getHHMM(d: Date): string {
 }
 
 async function tourHistoryAll(_url: string, args: RouteHandlerParams): Promise<RouteHandlerReturn> {
-
+	setTitle("Tournaments");
 	let data = await client.tournamentList();
 	if (data.kind !== 'success') {
 		showError(`Failed to fetch data`);

frontend/src/pages/ttt/ttt.ts

@@ -1,5 +1,5 @@
 import "./ttt.css"
-import {addRoute, type RouteHandlerReturn} from "@app/routing";
+import {addRoute, setTitle, type RouteHandlerReturn} from "@app/routing";
 import tttPage from "./ttt.html?raw";
 import {showError, showInfo} from "@app/toast";
 import {io} from "socket.io-client";
@@ -41,6 +41,7 @@ type CurrentGameInfo = GameUpdate & { lastState: GameUpdate['gameState'] | null
 // Route handler for the Tic-Tac-Toe page.
 // Instantiates the game logic and binds UI events.
 async function handleTTT(): Promise<RouteHandlerReturn> {
+	setTitle("Tic Tac Toe");
     const msgNotifTimeOut = 4 * 1000;
     const socket: Socket = getSocket();
     void socket;

frontend/src/pages/tttHistory/tttHistory.ts

@@ -1,8 +1,9 @@
-import { addRoute, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
+import { addRoute, navigateTo, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
 import page from './tttHistory.html?raw';
 import { isNullish } from "@app/utils";
 import client from "@app/api";
 import { updateUser } from "@app/auth";
+import { showError } from "@app/toast";
 
 
 function getHHMM(d: Date): string {
@@ -11,36 +12,36 @@ function getHHMM(d: Date): string {
 	return `${h < 9 ? '0' : ''}${h}:${m < 9 ? '0' : ''}${m}`
 }
 
-function statusText(side:'X'|'O',status: string): string {
+function statusText(side: 'X' | 'O', status: string): string {
 	if (status === `win${side}`) return 'WIN';
-	if (status === `win${side === 'X'? 'O' : 'X'}`) return 'LOSE';
+	if (status === `win${side === 'X' ? 'O' : 'X'}`) return 'LOSE';
 	return 'DRAW'
 }
 
-function statusColor(side:'X'|'O',status: string): string {
+function statusColor(side: 'X' | 'O', status: string): string {
 	if (status === `win${side}`) return 'text-green-600';
-	if (status === `win${side === 'X'? 'O' : 'X'}`) return 'text-red-600';
+	if (status === `win${side === 'X' ? 'O' : 'X'}`) return 'text-red-600';
 	return 'text-yellow-600'
 }
 
 async function tttHistory(_url: string, args: RouteHandlerParams): Promise<RouteHandlerReturn> {
+	setTitle("Tic Tac Toe Games");
 	if (isNullish(args.userid))
 		args.userid = 'me';
 	let user = await updateUser();
 	if (isNullish(user)) {
-		return { html: '<span> You aren\'t logged in </span>' };
+		return { html: '<span> You aren\'t logged in </span>', postInsert: () => { showError("You must be logged in !"); navigateTo("/") } };
 	}
 
-	let userInfoRes = await client.getUser({user: args.userid});
+	let userInfoRes = await client.getUser({ user: args.userid });
-	if (userInfoRes.kind !== 'success')
+	if (userInfoRes.kind !== 'success') {
-	{
+		return { html: '<span> You tried to open a game history with no data :(</span>', postInsert: () => { showError("We found no data"); navigateTo("/") } };
-		return { html: '<span> You tried to open a game history with no data :(</span>' };
 	}
 	let userInfo = userInfoRes.payload;
 	let res = await client.tttHistory({ user: args.userid });
 	if (res.kind === 'failure' || res.kind === 'notLoggedIn') {
 		// todo: make a real page on no data
-		return { html: '<span> You tried to open a game history with no data :(</span>' };
+		return { html: '<span> You tried to open a game history with no data :(</span>', postInsert: () => { showError("We found no data"); navigateTo("/") } };
 	}
 	let games = res.payload.data;
 	games.reverse();
@@ -54,7 +55,7 @@ async function tttHistory(_url: string, args: RouteHandlerParams): Promise<Route
 		// maybe we do want local games ? then put the check here :D
 		// if (!g.local) {
 		if (true) {
-			let state: 'win'|'lose'|'draw' = 'lose';
+			let state: 'win' | 'lose' | 'draw' = 'lose';
 
 			if (g.outcome === 'draw')
 				state = 'draw';
@@ -67,7 +68,7 @@ async function tttHistory(_url: string, args: RouteHandlerParams): Promise<Route
 				color = 'bg-green-300';
 			else if (state === 'lose')
 				color = 'bg-red-300';
-			else 
+			else
 				color = 'bg-amber-200';
 		}
 		e.className =