some proper auth

packages/client/src/app.tsx

@@ -1,20 +1,47 @@
-import "./style.css";
 import { Route, Router } from "@solidjs/router";
 import { lazy, Suspense } from "solid-js";
-import pkg from "../package.json";
 import { render } from "solid-js/web";
-import Root from "./routes/index";
 import "virtual:uno.css";
+import pkg from "../package.json";
+import "./style.css";
+import api from "./api";
+
+const Profile = () => {
+	let dialogRef!: HTMLDialogElement;
+
+	return (
+		<>
+			<div
+				onClick={() => dialogRef.showModal()}
+				class="i-solar-user-circle-bold button s-10 m-2 cursor-pointer fixed tr"
+			/>
+
+			<dialog ref={dialogRef} closedby="any">
+				<div class="fixed tr bg-emerald-100 m-2 p-4 rounded-xl border-2 shadow-md shadow-black">
+					Name:{" "}
+					<input
+						onChange={(e) =>
+							api.setName.post({ name: e.target.value })
+						}
+						class="bg-emerald-200 border-1.5 rounded-full px-4"
+					/>
+				</div>
+			</dialog>
+		</>
+	);
+};
 
 const App = () => (
 	<Router
 		root={(props) => (
 			<>
 				<Suspense>{props.children}</Suspense>
+				<Profile />
+
+				{/* Version */}
 				<span class="fixed br m-2 font-mono text-xs">
 					{"v" + pkg.version}
 				</span>
-				<div class="i-solar-user-circle-bold fixed s-10 top-0 right-0 m-2 cursor-pointer" />
 			</>
 		)}
 	>