fix(frontend): polish auth, tree, and settings UX

Author: AndresL230

frontend/src/app/page.tsx

@@ -673,7 +673,7 @@ export default function LandingPage() {
             <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: '#1a5c2a', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
           </div>
           <div className="flex items-center">
-            <button onClick={() => { window.location.href = `${API_URL}/api/auth/google`; }} className="text-[var(--brand-text2)] hover:text-[var(--brand-text1)] font-medium text-sm tracking-wide transition-all duration-300 mr-6 hidden sm:block">Sign In</button>
+            <button onClick={() => router.push('/auth')} className="text-[var(--brand-text2)] hover:text-[var(--brand-text1)] font-medium text-sm tracking-wide transition-all duration-300 mr-6 hidden sm:block">Sign In</button>
             <button onClick={startOnboarding} className="relative overflow-hidden group bg-[#1B6C42] text-white px-7 py-2.5 rounded-full font-medium text-sm tracking-wide shadow-sm hover:shadow-md transition-all duration-400 hover:scale-[1.04] active:scale-[0.97] landing-btn-shimmer">
               Get Started
             </button>

frontend/src/components/screens/Auth.tsx

@@ -59,7 +59,21 @@ function AuthInner() {
           overflow: "hidden",
         }}
       >
-        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <button
+          type="button"
+          onClick={() => router.push("/")}
+          aria-label="Back to home"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            background: "transparent",
+            border: 0,
+            padding: 0,
+            color: "inherit",
+            cursor: "pointer",
+          }}
+        >
           <svg width="28" height="28" viewBox="0 0 24 24">
             <path d="M12 22 Q 5 15 5 9 Q 5 3 12 3 Q 19 3 19 9 Q 19 15 12 22 Z" fill="#fff" opacity={0.15} />
             <path
@@ -71,7 +85,7 @@ function AuthInner() {
             />
           </svg>
           <span className="h-serif" style={{ fontSize: 22, fontWeight: 500 }}>Sapling</span>
-        </div>
+        </button>
         <div>
           <div className="h-serif" style={{ fontSize: 48, fontWeight: 500, lineHeight: 1.1, maxWidth: 440 }}>
             Your mind,
@@ -83,7 +97,7 @@ function AuthInner() {
             your knowledge graph session by session.
           </div>
         </div>
-        <div style={{ fontSize: 11, opacity: 0.5 }}>Est. 2024 · Stanford, CA</div>
+        <div aria-hidden style={{ height: 1 }} />
         <svg
           style={{ position: "absolute", right: -80, bottom: -60, opacity: 0.08 }}
           width="360"

frontend/src/components/screens/Settings.tsx

@@ -205,7 +205,7 @@ export function Settings() {
       <div style={{ display: "flex", height: "calc(100vh - 112px)" }}>
         <div style={{ flex: 1, minWidth: 0, padding: "24px 32px", overflowY: "auto" }}>
           {tab === "profile" && settings && (
-            <div style={{ maxWidth: 640 }}>
+            <div style={{ maxWidth: 640, margin: "0 auto" }}>
               <div className="h-serif" style={{ fontSize: 22, marginBottom: 20 }}>Profile</div>
               <div
                 className="card"
@@ -315,7 +315,7 @@ export function Settings() {
           )}
 
           {tab === "preferences" && settings && (
-            <div style={{ maxWidth: 640 }}>
+            <div style={{ maxWidth: 640, margin: "0 auto" }}>
               <div className="h-serif" style={{ fontSize: 22, marginBottom: 20 }}>Preferences</div>
               <div
                 style={{
@@ -446,7 +446,7 @@ export function Settings() {
           )}
 
           {tab === "notifications" && settings && (
-            <div style={{ maxWidth: 640 }}>
+            <div style={{ maxWidth: 640, margin: "0 auto" }}>
               <div className="h-serif" style={{ fontSize: 22, marginBottom: 20 }}>Notifications</div>
               {(
                 [
@@ -474,7 +474,7 @@ export function Settings() {
           )}
 
           {tab === "data" && (
-            <div style={{ maxWidth: 640 }}>
+            <div style={{ maxWidth: 640, margin: "0 auto" }}>
               <div className="h-serif" style={{ fontSize: 22, marginBottom: 20 }}>Your Data</div>
               <div className="card" style={{ padding: "var(--pad-lg)" }}>
                 <div style={{ fontWeight: 600, marginBottom: 4 }}>Export your data</div>
@@ -507,7 +507,7 @@ export function Settings() {
           )}
 
           {tab === "danger" && (
-            <div style={{ maxWidth: 640 }}>
+            <div style={{ maxWidth: 640, margin: "0 auto" }}>
               <div className="h-serif" style={{ fontSize: 22, marginBottom: 20, color: "var(--err)" }}>
                 Danger Zone
               </div>
@@ -622,7 +622,7 @@ function CosmeticsManager({ userId }: { userId: string }) {
   const lockedCount = catalogList.filter(c => !c.owned).length;
 
   return (
-    <div style={{ maxWidth: 720 }}>
+    <div style={{ maxWidth: 720, margin: "0 auto" }}>
       <div className="h-serif" style={{ fontSize: 22, marginBottom: 12 }}>Cosmetics</div>
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--border)", marginBottom: 16 }}>
         <div style={{ display: "flex", gap: 4 }}>

frontend/src/components/screens/Tree.tsx

@@ -235,7 +235,6 @@ export function Tree() {
         }}
       >
         <div style={{ position: "relative", flex: "0 1 260px" }}>
-          <Icon name="search" size={13} />
           <input
             value={query}
             onChange={e => setQuery(e.target.value)}