clean up some stuff, moved around other

frontend/index.html

@@ -49,9 +49,8 @@
 	<script type="module" src="/src/carousel/"></script>
 	<script type="module" src="/src/pages/"></script>
 	<script type="module" src="/src/routing/"></script>
-	<script type="module" src="/src/toast/"></script>
+	<script type="module" src="/src/toast"></script>
-	<script type="module" src="/src/auth/"></script>
+	<script type="module" src="/src/auth"></script>
-	<script type="module" src="/src/chat/"></script>
 </body>
 
 </html>

frontend/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

frontend/src/@types/dom.d.ts

@@ -1,14 +1,27 @@
+import { type State } from "ft_state";
+
 interface CustomEventMap {
-  "ft:pageChange": CustomEvent<{}>;
+	"ft:pageChange": CustomEvent<{}>;
 }
 
 declare global {
-  interface Document { //adds definition to Document, but you can do the same with HTMLElement
+	interface Document {
-    addEventListener<K extends keyof CustomEventMap>(type: K,
+		//adds definition to Document, but you can do the same with HTMLElement
-      listener: (this: Document, ev: CustomEventMap[K]) => void): void;
+		addEventListener<K extends keyof CustomEventMap>(
-    dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
+			type: K,
-  }
+			listener: (this: Document, ev: CustomEventMap[K]) => void,
+		): void;
+		dispatchEvent<K extends keyof CustomEventMap>(
+			ev: CustomEventMap[K],
+		): void;
+	}
 }
 
+declare global {
+	interface Window {
+		__state: State;
+	}
+}
 
 export { }; //keep that for TS compiler.
+

frontend/src/@types/ft_state.d.ts

@@ -0,0 +1,4 @@
+declare module 'ft_state' {
+	interface GlobalState {
+	};
+};

frontend/src/api/index.ts

@@ -1,6 +1,14 @@
+import { ensureWindowState } from '@app/utils';
 import { Configuration, OpenapiOtherApi } from './generated';
 export * from './generated'
 
+ensureWindowState();
+
+declare module 'ft_state' {
+	interface State {
+		client: OpenapiOtherApi;
+	}
+}
 
 const basePath = (() => {
 	let u = new URL(location.href);
@@ -8,11 +16,9 @@ const basePath = (() => {
 	u.hash = "";
 	u.search = "";
 	return u.toString().replace(/\/+$/, '');
-
 })();
 
 export const client = new OpenapiOtherApi(new Configuration({ basePath }));
 export default client;
 
-Object.assign(window as any, { apiClient: client });
+window.__state.client ??= client;
-

frontend/src/auth.ts

@@ -1,9 +1,13 @@
 import { showError } from "@app/toast";
 import client from '@app/api';
 import cookie from 'js-cookie';
+import { ensureWindowState } from "@app/utils";
 
 cookie.remove('pkce');
 
+ensureWindowState();
+window.__state.user ??= null;
+
 export type User = {
 	id: string;
 	guest: boolean;
@@ -15,18 +19,22 @@ export type User = {
 	}
 };
 
-let currentUser: User | null = null;
+declare module 'ft_state' {
+	interface State {
+		user: User | null,
+	}
+};
 
 export function getUser(): Readonly<User> | null {
-	return currentUser;
+	return window.__state.user;
 }
 
 export function isLogged(): boolean {
-	return currentUser !== null;
+	return window.__state.user !== null;
 }
 
 export function setUser(newUser: User | null) {
-	currentUser = newUser;
+	window.__state.user = newUser;
 }
 
 export async function updateUser(): Promise<Readonly<User> | null> {

frontend/src/chat/index.ts

@@ -1,2 +0,0 @@
-import './chat.css';
-  

frontend/src/pages/chat/chat.css

@@ -282,4 +282,4 @@ div-private {
 
 .hidden{
     display: none;
-}
+}

frontend/src/pages/chat/chat.ts

@@ -1,3 +1,4 @@
+import "./chat.css";
 import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
 import { showError } from "@app/toast";
 import authHtml from './chat.html?raw';

frontend/src/pages/profile/profile.ts

@@ -1,4 +1,4 @@
-import { addRoute, getRoute, handleRoute, navigateTo, setTitle } from "@app/routing";
+import { addRoute, handleRoute, navigateTo, setTitle } from "@app/routing";
 import { showError, showSuccess } from "@app/toast";
 import page from "./profile.html?raw";
 import { updateUser } from "@app/auth";

frontend/src/routing/index.ts

@@ -1,6 +1,20 @@
 import { updateUser } from '@app/auth';
 import { route_404 } from './special_routes'
+import { ensureWindowState } from '@app/utils';
 
+ensureWindowState();
+
+declare module 'ft_state' {
+	interface State {
+		routes: Map<string, RouteHandlerData>,
+		title: string,
+		titleElem: HTMLDivElement,
+	}
+};
+
+window.__state.routes ??= new Map();
+window.__state.title ??= "";
+window.__state.titleElem ??= document.querySelector<HTMLDivElement>('#header-title')!;
 
 // ---- Router logic ----
 export function navigateTo(url: string) {
@@ -101,44 +115,18 @@ function urlToParts(url: string): string[] {
 	return parts.filter(p => p.length !== 0);
 }
 
-function setupRoutes(): [
+export function addRoute(url: string, handler: RouteHandler | string, args?: Partial<RouteHandlerSpecialArgs>) {
-	() => Routes,
+	let d = new RouteHandlerData(url, handler, args ?? {});
-	(url: string, handler: RouteHandler, args?: Partial<RouteHandlerSpecialArgs>) => void
+	if (window.__state.routes.has(d.url))
-] {
+		throw `Tried to insert route ${url}, but it already exists`;
-	const routes = new Map();
+	window.__state.routes.set(d.url, d);
-
-	return [
-		() => routes,
-		(url: string, handler: RouteHandler | string, args?: Partial<RouteHandlerSpecialArgs>) => {
-			let d = new RouteHandlerData(url, handler, args ?? {});
-			if (routes.has(d.url))
-				throw `Tried to insert route ${url}, but it already exists`;
-			routes.set(d.url, d);
-		}
-	];
-}
-
-function setupTitle(): [
-	() => string,
-	(title: string) => void,
-] {
-	let title = "";
-	let titleElem = document.querySelector<HTMLDivElement>('#header-title')!;
-	return [
-		() => title,
-		(new_title) => {
-			title = new_title;
-			titleElem.innerText = title;
-		}
-	]
 }
 
 
-export const [getRoute, addRoute] = setupRoutes();
+export function setTitle(title: string) {
-
+	window.__state.title = title;
-export const [getTitle, setTitle] = setupTitle();
+	window.__state.titleElem.innerText = window.__state.title;
-
+}
-(window as any).getRoute = getRoute;
 
 const executeRouteHandler = async (handler: RouteHandlerData, ...args: Parameters<SyncRouteHandler>): Promise<RouteHandlerReturn> => {
 	// handler may be a raw string literal, if yes => return it directly
@@ -169,7 +157,7 @@ function parts_match(route_parts: (string | null)[], parts: string[]): boolean {
 }
 
 export async function handleRoute() {
-	let routes = getRoute();
+	let routes = window.__state.routes;
 
 	let parts = urlToParts(window.location.pathname);
 	let routes_all = routes.entries();
@@ -222,4 +210,4 @@ document.addEventListener('click', e => {
 // ---- Handle browser navigation (back/forward) ----
 window.addEventListener('popstate', handleRoute);
 
-Object.assign((window as any), { getTitle, setTitle, getRoute, addRoute, navigateTo })
+Object.assign((window as any), { setTitle, addRoute, navigateTo })

frontend/src/routing/special_routes.ts

@@ -1,5 +1,5 @@
 import { escapeHTML } from "@app/utils";
-import { getRoute, type RouteHandlerParams } from "@app/routing";
+import { type RouteHandlerParams } from "@app/routing";
 
 export async function route_404(url: string, _args: RouteHandlerParams): Promise<string> {
 	return `

frontend/src/signin/alreadyLoggedin.html

@@ -1,24 +0,0 @@
-<div class="grid h-full place-items-center">
-    <div class="bg-white shadow-lg rounded-2xl p-8 w-full max-w-md">
-        <h1 class="text-2xl font-semibold text-center mb-6 text-gray-800">You are already logged in</h1>
-        <div id="returnToDiv" hidden>
-            <p class="text-center text-sm text-gray-500 mt-4">
-                We were asked to redirect you to somewhere when you logged in,
-                but you already are !
-                <br />
-                You can click the button below to go there
-            </p>
-            <button id="bReturnTo"
-                    class="w-full bg-green-600 text-white font-medium py-2 rounded-xl hover:bg-gray-700 transition">
-                Get redirected
-            </button>
-        </div>
-        <p class="text-center text-sm text-gray-500 mt-4">Want to logout ? Click the big button bellow !</p>
-        <button id="bLogout"
-                class="w-full bg-gray-600 text-white font-medium py-2 rounded-xl hover:bg-gray-700 transition">
-            Logout
-        </button>
-        <p class="text-center text-sm text-gray-500 mt-4">Otherwise, here is a cute cat picture</p>
-        <img class="" id="cuteCatImage" hidden />
-    </div>
-</div>

frontend/src/typescript.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

frontend/src/utils.ts

@@ -6,3 +6,8 @@ export function escapeHTML(str: string): string {
 export function isNullish<T>(v: T | undefined | null): v is (null | undefined) {
 	return v === null || v === undefined;
 }
+
+// MAKE SURE YOU DO WANT TO CALL THIS FUNCTION
+export function ensureWindowState() {
+	window.__state = window.__state ?? {};
+}