refactor: simplify OAuth routes, add type safety, deduplicate UI components

- Extract handleOAuthCallback to eliminate GET/POST duplication in oauth.ts
- Add P2002 race condition handling in findOrCreateUser
- Add .unref() to stateStore cleanup timer to not block process exit
- Use Provider union type instead of bare strings throughout OAuth code
- Export API_BASE from api.ts, reuse in OAuthButtons
- Extract MobileBranding component to deduplicate Login/Register mobile brand
- Extract shared Logo component in AuthBranding
- Remove unnecessary WHAT comments

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/web/src/components/AuthBranding.tsx

@@ -1,36 +1,51 @@
 import { useI18n } from '../lib/i18n';
 
+function Logo({ className }: { className: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 2L2 7l10 5 10-5-10-5z" />
+      <path d="M2 17l10 5 10-5" />
+      <path d="M2 12l10 5 10-5" />
+    </svg>
+  );
+}
+
+export function MobileBranding() {
+  const { t } = useI18n();
+
+  return (
+    <div className="lg:hidden text-center mb-8">
+      <div className="w-11 h-11 rounded-xl bg-accent mx-auto flex items-center justify-center mb-4 shadow-md">
+        <Logo className="w-5 h-5 text-white" />
+      </div>
+      <h1 className="text-xl font-semibold text-text-primary tracking-[-0.01em]">{t('auth.productName')}</h1>
+      <p className="text-[13px] text-text-muted mt-1">{t('auth.slogan')}</p>
+    </div>
+  );
+}
+
 export default function AuthBranding() {
   const { t } = useI18n();
 
   return (
     <div className="hidden lg:flex lg:w-1/2 relative overflow-hidden items-center justify-center p-12"
       style={{ background: 'linear-gradient(135deg, var(--fox-amber), var(--fox-orange))' }}>
-      {/* Decorative circles */}
       <div className="absolute -top-24 -left-24 w-96 h-96 rounded-full opacity-10 bg-white" />
       <div className="absolute -bottom-32 -right-32 w-[500px] h-[500px] rounded-full opacity-10 bg-white" />
 
       <div className="relative z-10 max-w-md text-white">
-        {/* Logo */}
         <div className="w-20 h-20 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-8 shadow-lg">
-          <svg className="w-10 h-10 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M12 2L2 7l10 5 10-5-10-5z" />
-            <path d="M2 17l10 5 10-5" />
-            <path d="M2 12l10 5 10-5" />
-          </svg>
+          <Logo className="w-10 h-10 text-white" />
         </div>
 
-        {/* Product name */}
         <h1 className="text-4xl font-bold tracking-tight mb-3">
           {t('auth.productName')}
         </h1>
 
-        {/* Slogan */}
         <p className="text-xl text-white/90 mb-10 leading-relaxed">
           {t('auth.slogan')}
         </p>
 
-        {/* Feature highlights */}
         <div className="space-y-4">
           {['auth.feature1', 'auth.feature2', 'auth.feature3'].map((key) => (
             <div key={key} className="flex items-start gap-3">