feat: add back edit page and fix profile settings

frontend/src/components/header.tsx

@@ -1,9 +1,27 @@
 import { Icon } from "@iconify/react";
 import SearchBar from "./search-bar";
-import HeaderProfile from "./header-profile";
 import { Link } from "react-router";
+import { useStore } from "@nanostores/react";
+import { session } from "../session";
+import { useEffect } from "react";
 
 export default function Header() {
+	const $session = useStore(session);
+
+	useEffect(() => {
+		fetch(`${import.meta.env.VITE_API_URL}/api/auth/session`, { credentials: "include" })
+			.then((res) => {
+				if (!res.ok) throw new Error("Failed to get session");
+				return res.json();
+			})
+			.then((data) => {
+				session.set(data);
+			})
+			.catch((err) => {
+				console.error(err);
+			});
+	}, []);
+
 	return (
 		<header className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1">
 			<Link
@@ -35,7 +53,47 @@ export default function Header() {
 						Submit
 					</Link>
 				</li>
-				<HeaderProfile />
+				{!$session?.user ? (
+					<li>
+						<Link to={"/login"} className="pill button h-full">
+							Login
+						</Link>
+					</li>
+				) : (
+					<>
+						<li title="Your profile">
+							<Link
+								to={`/profile/${$session?.user?.id}`}
+								aria-label="Go to profile"
+								className="pill button gap-2! p-0! h-full max-w-64"
+								data-tooltip="Your Profile"
+							>
+								<img
+									src={$session.user.image.startsWith("/profile") ? `${import.meta.env.VITE_API_URL}${$session.user.image}` : $session.user.image}
+									onError={(e) => {
+										e.currentTarget.onerror = null; // Prevent infinite loops
+										e.currentTarget.src = "/guest.png";
+									}}
+									alt="profile picture"
+									width={40}
+									height={40}
+									className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
+								/>
+								<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{$session?.user?.name ?? "unknown"}</span>
+							</Link>
+						</li>
+						<li title="Logout">
+							<Link
+								to={`${import.meta.env.VITE_API_URL}/api/auth/signout`}
+								aria-label="Log Out"
+								className="pill button p-2! aspect-square h-full"
+								data-tooltip="Log Out"
+							>
+								<Icon icon="ic:round-logout" fontSize={24} />
+							</Link>
+						</li>
+					</>
+				)}
 			</ul>
 		</header>
 	);