Merge branch 'feat/frontend-rearchitecture'

2 files changed, 65 insertions, 0 deletions

diff --git a/frontend/app/hooks/useAuth.ts b/frontend/app/hooks/useAuth.ts
new file mode 100644
index 0000000..8762734
--- /dev/null
+++ b/frontend/app/hooks/useAuth.ts
@@ -0,0 +1,58 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { apiLogin } from "../api/client";
+import {
+	type User,
+	clearToken,
+	getToken,
+	getUserFromToken,
+	isTokenExpired,
+	setToken,
+} from "../auth";
+
+// Simple external store to trigger re-renders when auth state changes.
+let authVersion = 0;
+const listeners = new Set<() => void>();
+
+function subscribe(callback: () => void) {
+	listeners.add(callback);
+	return () => listeners.delete(callback);
+}
+
+function getSnapshot() {
+	return authVersion;
+}
+
+function notifyAuthChange() {
+	authVersion++;
+	for (const listener of listeners) {
+		listener();
+	}
+}
+
+export function useAuth(): {
+	user: User | null;
+	token: string | null;
+	isLoggedIn: boolean;
+	login: (username: string, password: string) => Promise<void>;
+	logout: () => void;
+} {
+	useSyncExternalStore(subscribe, getSnapshot);
+
+	const token = getToken();
+	const isExpired = isTokenExpired();
+	const user = isExpired ? null : getUserFromToken();
+	const isLoggedIn = user !== null && !isExpired;
+
+	const login = useCallback(async (username: string, password: string) => {
+		const { token } = await apiLogin(username, password);
+		setToken(token);
+		notifyAuthChange();
+	}, []);
+
+	const logout = useCallback(() => {
+		clearToken();
+		notifyAuthChange();
+	}, []);
+
+	return { user, token: isLoggedIn ? token : null, isLoggedIn, login, logout };
+}
diff --git a/frontend/app/hooks/usePageTitle.ts b/frontend/app/hooks/usePageTitle.ts
new file mode 100644
index 0000000..fb8def5
--- /dev/null
+++ b/frontend/app/hooks/usePageTitle.ts
@@ -0,0 +1,7 @@
+import { useEffect } from "react";
+
+export function usePageTitle(title: string) {
+	useEffect(() => {
+		document.title = title;
+	}, [title]);
+}