package -> pkg

pkg/client/src/app.tsx

@@ -0,0 +1,64 @@
+import { Route, Router } from "@solidjs/router";
+import { createResource, lazy, Suspense } from "solid-js";
+import { render } from "solid-js/web";
+import "virtual:uno.css";
+import pkg from "^/package.json";
+import "./style.css";
+import api from "./api";
+import { mePromise } from "./profile";
+
+const Profile = () => {
+	let dialogRef!: HTMLDialogElement;
+	const [profile] = createResource(() =>
+		mePromise.then(() => api.profile.get())
+	);
+
+	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
+						value={profile()?.data?.name ?? ""}
+						onChange={(e) => {
+							dialogRef.close();
+							void api.setName.post({ name: e.target.value });
+						}}
+						class="bg-emerald-200 border-1.5 rounded-full px-4"
+					/>
+				</div>
+			</dialog>
+		</>
+	);
+};
+
+const App = () => {
+	return (
+		<Router
+			root={(props) => (
+				<>
+					<Suspense>{props.children}</Suspense>
+					<Profile />
+
+					{/* Version */}
+					<span class="fixed br m-2 font-mono text-xs">
+						{"v" + pkg.version}
+					</span>
+				</>
+			)}
+		>
+			<Route path="/" component={lazy(() => import("./routes/index"))} />
+			<Route
+				path="/:tableKey"
+				component={lazy(() => import("./routes/[table]"))}
+			/>
+		</Router>
+	);
+};
+
+render(App, document.getElementById("app")!);