add build serve and start on other things

src/views/App.tsx

@@ -1,13 +0,0 @@
-import type { Component } from "solid-js";
-
-import styles from "@views/css/App.module.css";
-
-const App: Component = () => {
-	return (
-		<div class={styles.App}>
-			<header class={styles.header} />
-		</div>
-	);
-};
-
-export default App;

src/views/app.tsx

@@ -0,0 +1,18 @@
+import { Route } from "@solidjs/router";
+import { about } from "@views/pages/about";
+import { error } from "@views/pages/error";
+import { home } from "@views/pages/home";
+import { login } from "@views/pages/login";
+
+import type { Component } from "solid-js";
+
+const app: Component = () => (
+	<>
+		<Route path="/" component={home} />
+		<Route path="/login" component={login} />
+		<Route path="/about" component={about} />
+		<Route path="*" component={error} />
+	</>
+);
+
+export { app };

src/views/css/App.module.css

@@ -1,33 +0,0 @@
-.App {
-	text-align: center;
-}
-
-.logo {
-	animation: logo-spin infinite 20s linear;
-	height: 40vmin;
-	pointer-events: none;
-}
-
-.header {
-	background-color: #282c34;
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	font-size: calc(10px + 2vmin);
-	color: white;
-}
-
-.link {
-	color: #b318f0;
-}
-
-@keyframes logo-spin {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}

src/views/css/global.css

@@ -0,0 +1,26 @@
+:root {
+	--background: #f4f4f4;
+	--text: #000;
+	--input-background: #fff;
+	--input-border: #ccc;
+	--button-background: #4f46e5;
+	--button-hover-background: #4338ca;
+	--button-text: #fff;
+}
+
+:root[data-theme="dark"] {
+	--background: #18181b;
+	--text: #f9fafb;
+	--input-background: #27272a;
+	--input-border: #3f3f46;
+	--button-background: #6366f1;
+	--button-hover-background: #4f46e5;
+	--button-text: #fff;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	background-color: var(--background);
+	color: var(--text);
+}

src/views/css/index.css

@@ -1,13 +0,0 @@
-body {
-	margin: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-		sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-code {
-	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-		monospace;
-}

src/views/css/login.module.css

@@ -0,0 +1,45 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	background-color: var(--background);
+}
+
+.title {
+	font-size: 2rem;
+	margin-bottom: 1rem;
+	color: var(--text);
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	width: 300px;
+}
+
+.input {
+	padding: 0.5rem;
+	font-size: 1rem;
+	background-color: var(--input-background);
+	color: var(--text);
+	border: 1px solid var(--input-border);
+	border-radius: 4px;
+}
+
+.button {
+	padding: 0.5rem;
+	font-size: 1rem;
+	background-color: var(--button-background);
+	color: var(--button-text);
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.button:hover {
+	background-color: var(--button-hover-background);
+}

src/views/index.tsx

@@ -1,12 +1,20 @@
+import "@views/css/global.css";
+
+import { Router } from "@solidjs/router";
+import { app as App } from "@views/app";
 import { render } from "solid-js/web";
 
-import "@views/css/index.css";
-import App from "@views/App";
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+document.documentElement.dataset.theme = prefersDark ? "dark" : "light";
 
 const root = document.getElementById("root");
+if (!(root instanceof HTMLElement)) throw new Error("Root element not found");
 
-if (!(root instanceof HTMLElement)) {
-	throw new Error("Root element not found");
-}
-
-render(() => <App />, root);
+render(
+	() => (
+		<Router>
+			<App />
+		</Router>
+	),
+	root,
+);

src/views/pages/about.tsx

@@ -0,0 +1,12 @@
+import type { Component } from "solid-js";
+
+const about: Component = () => {
+	return (
+		<div>
+			<h1>About</h1>
+			<p>This is the about page.</p>
+		</div>
+	);
+};
+
+export { about };

src/views/pages/error.tsx

@@ -0,0 +1,12 @@
+import type { Component } from "solid-js";
+
+const error: Component = () => {
+	return (
+		<div>
+			<h1>404 - Not Found</h1>
+			<p>The page you're looking for doesn't exist.</p>
+		</div>
+	);
+};
+
+export { error };

src/views/pages/home.tsx

@@ -0,0 +1,33 @@
+import { getClientEnv } from "@lib/envClient";
+import { useNavigate } from "@solidjs/router";
+import { onMount } from "solid-js";
+
+const home = () => {
+	const navigate = useNavigate();
+	const { backendUrl } = getClientEnv();
+
+	onMount(async () => {
+		try {
+			const res = await fetch(`${backendUrl}/auth/session`, {
+				credentials: "include",
+			});
+
+			if (res.ok) {
+				const data = await res.json();
+				if (data?.valid) {
+					navigate("/dashboard", { replace: true });
+				} else {
+					navigate("/login", { replace: true });
+				}
+			} else {
+				navigate("/login", { replace: true });
+			}
+		} catch {
+			navigate("/login", { replace: true });
+		}
+	});
+
+	return null;
+};
+
+export { home };

src/views/pages/login.tsx

@@ -0,0 +1,19 @@
+import styles from "@views/css/login.module.css";
+import type { Component } from "solid-js";
+
+const login: Component = () => {
+	return (
+		<div class={styles.container}>
+			<h1 class={styles.title}>Login</h1>
+			<form class={styles.form}>
+				<input type="text" placeholder="Username" class={styles.input} />
+				<input type="password" placeholder="Password" class={styles.input} />
+				<button type="submit" class={styles.button}>
+					Login
+				</button>
+			</form>
+		</div>
+	);
+};
+
+export { login };