refactor: organize desktop vs. mobile into separate folders

js/desktop/src/features/auth/code-step.tsx

@@ -0,0 +1,69 @@
+import { type FormEvent, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { H3, Muted } from "@/components/ui/typography";
+import { useAuthStore } from "@/stores/auth-store";
+
+interface CodeStepProps {
+  email: string;
+  onBack: () => void;
+}
+
+export function CodeStep({ email, onBack }: CodeStepProps) {
+  const [code, setCode] = useState("");
+  const isSigningIn = useAuthStore((s) => s.isSigningIn);
+  const error = useAuthStore((s) => s.error);
+  const signIn = useAuthStore((s) => s.signIn);
+  const clearError = useAuthStore((s) => s.clearError);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await signIn(email, code);
+    } catch {
+      // Error is set in the store
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <H3>Check your email</H3>
+        <Muted>
+          We sent a code to <strong className="text-foreground">{email}</strong>.
+        </Muted>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="code">Code</Label>
+        <Input
+          id="code"
+          type="text"
+          inputMode="numeric"
+          placeholder="Enter code"
+          value={code}
+          onChange={(e) => {
+            setCode(e.target.value);
+            if (error) clearError();
+          }}
+          required
+          autoFocus
+        />
+      </div>
+
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
+
+      <div className="flex flex-col gap-2">
+        <Button type="submit" disabled={isSigningIn || !code}>
+          {isSigningIn ? "Signing in..." : "Sign in"}
+        </Button>
+        <Button type="button" variant="ghost" onClick={onBack}>
+          Back
+        </Button>
+      </div>
+    </form>
+  );
+}

js/desktop/src/features/auth/email-step.tsx

@@ -0,0 +1,82 @@
+import { type FormEvent, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { H3, Muted } from "@/components/ui/typography";
+import { PRIVACY_URL, TERMS_URL } from "@/lib/constants";
+import { useAuthStore } from "@/stores/auth-store";
+
+interface EmailStepProps {
+  onCodeSent: (email: string) => void;
+}
+
+export function EmailStep({ onCodeSent }: EmailStepProps) {
+  const [email, setEmail] = useState("");
+  const isRequestingCode = useAuthStore((s) => s.isRequestingCode);
+  const error = useAuthStore((s) => s.error);
+  const requestCode = useAuthStore((s) => s.requestCode);
+  const clearError = useAuthStore((s) => s.clearError);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await requestCode(email);
+      onCodeSent(email);
+    } catch {
+      // Error is set in the store
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <H3>Sign in</H3>
+        <Muted>Enter your email to receive a sign-in code.</Muted>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          placeholder="[email protected]"
+          value={email}
+          onChange={(e) => {
+            setEmail(e.target.value);
+            if (error) clearError();
+          }}
+          required
+          autoFocus
+        />
+      </div>
+
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
+
+      <Button type="submit" disabled={isRequestingCode || !email}>
+        {isRequestingCode ? "Sending..." : "Continue"}
+      </Button>
+
+      <Muted className="text-center text-xs">
+        By continuing, you agree to our{" "}
+        <button
+          type="button"
+          onClick={() => window.electronLink.openExternal(TERMS_URL)}
+          className="underline underline-offset-2 hover:text-foreground"
+        >
+          Terms of Service
+        </button>{" "}
+        and{" "}
+        <button
+          type="button"
+          onClick={() => window.electronLink.openExternal(PRIVACY_URL)}
+          className="underline underline-offset-2 hover:text-foreground"
+        >
+          Privacy Policy
+        </button>
+        .
+      </Muted>
+    </form>
+  );
+}

js/desktop/src/features/auth/login-page.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { WindowControls } from "@/components/window-controls";
+import { EmailStep } from "./email-step";
+import { CodeStep } from "./code-step";
+
+type Step = "email" | "code";
+
+export function LoginPage() {
+  const [step, setStep] = useState<Step>("email");
+  const [email, setEmail] = useState("");
+
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="drag-region flex items-center gap-3 border-b px-3 py-1">
+        <WindowControls />
+      </div>
+      <div className="flex flex-1 items-center justify-center p-4">
+        <div className="w-full max-w-sm">
+          {step === "email" ? (
+            <EmailStep
+              onCodeSent={(submittedEmail) => {
+                setEmail(submittedEmail);
+                setStep("code");
+              }}
+            />
+          ) : (
+            <CodeStep
+              email={email}
+              onBack={() => setStep("email")}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}