feat: usernames

also change userId to number

src/app/components/like-button.tsx

@@ -23,7 +23,7 @@ export default function LikeButton({ likes, isLoggedIn }: Props) {
 	};
 
 	return (
-		<button onClick={onClick} className="flex items-center gap-2 text-xl text-red-400 mt-1 cursor-pointer">
+		<button onClick={onClick} className="flex items-center gap-2 text-xl text-red-400 cursor-pointer">
 			<Icon icon={isLiked ? "icon-park-solid:like" : "icon-park-outline:like"} />
 			<span>{likesState}</span>
 		</button>

src/app/components/login-buttons.tsx

@@ -6,11 +6,17 @@ import { signIn } from "next-auth/react";
 export default function LoginButtons() {
 	return (
 		<div className="flex flex-col items-center gap-2 mt-8">
-			<button onClick={() => signIn("discord")} className="pill button gap-2 !px-3 !bg-indigo-400 !border-indigo-500 hover:!bg-indigo-500">
+			<button
+				onClick={() => signIn("discord", { redirectTo: "/create-username" })}
+				className="pill button gap-2 !px-3 !bg-indigo-400 !border-indigo-500 hover:!bg-indigo-500"
+			>
 				<Icon icon="ic:baseline-discord" fontSize={32} />
 				Login with Discord
 			</button>
-			<button onClick={() => signIn("github")} className="pill button gap-2 !px-3 !bg-zinc-700 !border-zinc-800  hover:!bg-zinc-800 text-white">
+			<button
+				onClick={() => signIn("github", { redirectTo: "/create-username" })}
+				className="pill button gap-2 !px-3 !bg-zinc-700 !border-zinc-800  hover:!bg-zinc-800 text-white"
+			>
 				<Icon icon="mdi:github" fontSize={32} />
 				Login with GitHub
 			</button>

src/app/components/profile-overview.tsx

@@ -7,7 +7,7 @@ export default async function ProfileOverview() {
 		<li title="Your profile">
 			<button className="pill button !gap-2 !p-0 h-full max-w-64">
 				<img src={session?.user?.image ?? "/missing.webp"} alt="profile picture" className="rounded-full h-full outline-2 outline-orange-400" />
-				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.name}</span>
+				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.username ?? "unknown"}</span>
 			</button>
 		</li>
 	);

src/app/components/username-form.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { redirect } from "next/navigation";
+
+export default function UsernameForm() {
+	const [username, setUsername] = useState("");
+	const [error, setError] = useState(null);
+
+	const handleSubmit = async (event: FormEvent) => {
+		event.preventDefault();
+
+		const response = await fetch("/api/auth/username", {
+			method: "PATCH",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ username }),
+		});
+
+		if (!response.ok) {
+			const { error } = await response.json();
+			setError(error);
+			return;
+		}
+
+		redirect("/");
+	};
+
+	return (
+		<form onSubmit={handleSubmit} className="flex flex-col items-center">
+			<input
+				type="text"
+				placeholder="Type your username..."
+				value={username}
+				onChange={(e) => setUsername(e.target.value)}
+				required
+				className="pill !bg-orange-200 outline-0 focus:ring-[3px] ring-orange-400/50 transition w-96 mt-8 mb-2"
+			/>
+
+			<button type="submit" className="pill button w-min">
+				Submit
+			</button>
+			{error && <p className="text-red-400 font-semibold mt-4">Error: {error}</p>}
+		</form>
+	);
+}