Add Prettier for TypeScript formatting

- Install prettier
- Configure .prettierrc.json and .prettierignore
- Add npm scripts: format, format:check
- Add Makefile target: format-frontend
- Format all frontend files

frontend/app/signup/[code]/page.tsx

@@ -13,7 +13,7 @@ export default function SignupWithCodePage() {
   useEffect(() => {
     // Wait for auth check to complete before redirecting
     if (isLoading) return;
-    
+
     if (user) {
       // Already logged in, redirect to home
       router.replace("/");
@@ -25,15 +25,17 @@ export default function SignupWithCodePage() {
   }, [user, isLoading, code, router]);
 
   return (
-    <main style={{ 
-      minHeight: "100vh", 
-      display: "flex", 
-      alignItems: "center", 
-      justifyContent: "center",
-      background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0f0f23 100%)",
-      color: "rgba(255,255,255,0.6)",
-      fontFamily: "'DM Sans', system-ui, sans-serif",
-    }}>
+    <main
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0f0f23 100%)",
+        color: "rgba(255,255,255,0.6)",
+        fontFamily: "'DM Sans', system-ui, sans-serif",
+      }}
+    >
       Redirecting...
     </main>
   );

frontend/app/signup/page.tsx

@@ -15,19 +15,19 @@ interface InviteCheckResponse {
 function SignupContent() {
   const searchParams = useSearchParams();
   const initialCode = searchParams.get("code") || "";
-  
+
   const [inviteCode, setInviteCode] = useState(initialCode);
   const [inviteValid, setInviteValid] = useState<boolean | null>(null);
   const [inviteError, setInviteError] = useState("");
   const [isCheckingInvite, setIsCheckingInvite] = useState(false);
   const [isCheckingInitialCode, setIsCheckingInitialCode] = useState(!!initialCode);
-  
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [error, setError] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
-  
+
   const { user, register } = useAuth();
   const router = useRouter();
 
@@ -52,7 +52,7 @@ function SignupContent() {
       const response = await api.get<InviteCheckResponse>(
         `/api/invites/${encodeURIComponent(code.trim())}/check`
       );
-      
+
       if (response.valid) {
         setInviteValid(true);
         setInviteError("");
@@ -141,7 +141,9 @@ function SignupContent() {
               {inviteError && <div style={styles.error}>{inviteError}</div>}
 
               <div style={styles.field}>
-                <label htmlFor="inviteCode" style={styles.label}>Invite Code</label>
+                <label htmlFor="inviteCode" style={styles.label}>
+                  Invite Code
+                </label>
                 <input
                   id="inviteCode"
                   type="text"
@@ -156,7 +158,14 @@ function SignupContent() {
                   required
                   autoFocus
                 />
-                <span style={{ ...styles.link, fontSize: "0.8rem", marginTop: "0.5rem", display: "block" }}>
+                <span
+                  style={{
+                    ...styles.link,
+                    fontSize: "0.8rem",
+                    marginTop: "0.5rem",
+                    display: "block",
+                  }}
+                >
                   Ask your inviter for this code
                 </span>
               </div>
@@ -193,12 +202,17 @@ function SignupContent() {
           <div style={styles.header}>
             <h1 style={styles.title}>Create account</h1>
             <p style={styles.subtitle}>
-              Using invite: <code style={{ 
-                background: "rgba(255,255,255,0.1)", 
-                padding: "0.2rem 0.5rem", 
-                borderRadius: "4px",
-                fontSize: "0.85rem"
-              }}>{inviteCode}</code>
+              Using invite:{" "}
+              <code
+                style={{
+                  background: "rgba(255,255,255,0.1)",
+                  padding: "0.2rem 0.5rem",
+                  borderRadius: "4px",
+                  fontSize: "0.85rem",
+                }}
+              >
+                {inviteCode}
+              </code>
             </p>
           </div>
 
@@ -206,7 +220,9 @@ function SignupContent() {
             {error && <div style={styles.error}>{error}</div>}
 
             <div style={styles.field}>
-              <label htmlFor="email" style={styles.label}>Email</label>
+              <label htmlFor="email" style={styles.label}>
+                Email
+              </label>
               <input
                 id="email"
                 type="email"
@@ -220,7 +236,9 @@ function SignupContent() {
             </div>
 
             <div style={styles.field}>
-              <label htmlFor="password" style={styles.label}>Password</label>
+              <label htmlFor="password" style={styles.label}>
+                Password
+              </label>
               <input
                 id="password"
                 type="password"
@@ -233,7 +251,9 @@ function SignupContent() {
             </div>
 
             <div style={styles.field}>
-              <label htmlFor="confirmPassword" style={styles.label}>Confirm Password</label>
+              <label htmlFor="confirmPassword" style={styles.label}>
+                Confirm Password
+              </label>
               <input
                 id="confirmPassword"
                 type="password"
@@ -282,17 +302,17 @@ function SignupContent() {
 
 export default function SignupPage() {
   return (
-    <Suspense fallback={
-      <main style={styles.main}>
-        <div style={styles.container}>
-          <div style={styles.card}>
-            <div style={{ textAlign: "center", color: "rgba(255,255,255,0.6)" }}>
-              Loading...
+    <Suspense
+      fallback={
+        <main style={styles.main}>
+          <div style={styles.container}>
+            <div style={styles.card}>
+              <div style={{ textAlign: "center", color: "rgba(255,255,255,0.6)" }}>Loading...</div>
             </div>
           </div>
-        </div>
-      </main>
-    }>
+        </main>
+      }
+    >
       <SignupContent />
     </Suspense>
   );