Add proper mobile keyboard types and hints to all input fields

- Email inputs: autoComplete="email", enterKeyHint="send"
- Search inputs: type="search", enterKeyHint="search", disable autocorrect
- Join code inputs: enterKeyHint="go", disable autocomplete/autocapitalize
- Number inputs: inputMode="numeric", enterKeyHint="done"
- Name inputs: autoComplete="off", enterKeyHint="next"/"done"

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: GraysonCAdams

src/app/LandingClient.tsx

@@ -853,6 +853,11 @@ export default function LandingClient() {
                   placeholder="Enter invite code"
                   className="input-glass flex-1 text-sm"
                   maxLength={10}
+                  enterKeyHint="go"
+                  autoComplete="off"
+                  autoCapitalize="off"
+                  autoCorrect="off"
+                  spellCheck={false}
                 />
                 <button
                   onClick={handleJoinSubmit}
@@ -906,6 +911,8 @@ export default function LandingClient() {
               placeholder="Spotify username or email"
               className="input-glass w-full"
               onKeyDown={(e) => e.key === 'Enter' && handleSignInLookup()}
+              autoComplete="username"
+              enterKeyHint="go"
             />
             <button
               onClick={handleSignInLookup}

src/app/circle/[circleId]/settings/CircleSettingsClient.tsx

@@ -316,6 +316,8 @@ export default function CircleSettingsClient({ circle, isHost }: CircleSettingsC
                     onChange={(e) => setEditName(e.target.value)}
                     placeholder="My Circle"
                     className="input-glass w-full"
+                    autoComplete="off"
+                    enterKeyHint="done"
                   />
                 </div>
               </div>

src/app/circle/join/page.tsx

@@ -176,6 +176,11 @@ function JoinCircleContent() {
                   }}
                   placeholder="Enter invite code"
                   className="input-glass flex-1"
+                  enterKeyHint="go"
+                  autoComplete="off"
+                  autoCapitalize="off"
+                  autoCorrect="off"
+                  spellCheck={false}
                 />
                 <button
                   onClick={() => lookupCode(code.trim())}

src/app/dashboard/DashboardClient.tsx

@@ -99,50 +99,49 @@ const VIBE_PLACEHOLDERS: Array<{
   name: string;
   desc: string;
   vibeLine: string;
-  emoji: string;
-  gradient: [string, string];
+  imageUrl: string;
 }> = [
   {
     name: 'late night drives',
     desc: 'windows down, vibes up',
     vibeLine: 'moody R&B \u00b7 chill rap \u00b7 slow jams',
-    emoji: '\ud83c\udf19',
-    gradient: ['#1e1b4b', '#312e81'],
+    imageUrl:
+      'https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=112&h=112&fit=crop&auto=format',
   },
   {
     name: 'UNHINGED BANGERS',
     desc: 'no skips, only chaos',
     vibeLine: 'hyperpop \u00b7 hard drops \u00b7 EDM',
-    emoji: '\ud83d\udd25',
-    gradient: ['#7f1d1d', '#dc2626'],
+    imageUrl:
+      'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=112&h=112&fit=crop&auto=format',
   },
   {
     name: 'main character energy',
     desc: 'the soundtrack to your villain arc',
     vibeLine: 'indie pop \u00b7 alt \u00b7 cinematic',
-    emoji: '\u2728',
-    gradient: ['#0c4a6e', '#38bdf8'],
+    imageUrl:
+      'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=112&h=112&fit=crop&auto=format',
   },
   {
     name: 'COZY GIRL AUTUMN',
     desc: 'candles lit, oversized hoodie on',
     vibeLine: 'soft folk \u00b7 acoustic \u00b7 bedroom pop',
-    emoji: '\ud83c\udf42',
-    gradient: ['#78350f', '#d97706'],
+    imageUrl:
+      'https://images.unsplash.com/photo-1508193638397-1c4234db14d8?w=112&h=112&fit=crop&auto=format',
   },
   {
     name: 'gym arc',
     desc: 'PR or ER, no in between',
     vibeLine: 'trap \u00b7 drill \u00b7 rage beats',
-    emoji: '\ud83d\udcaa',
-    gradient: ['#14532d', '#22c55e'],
+    imageUrl:
+      'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=112&h=112&fit=crop&auto=format',
   },
   {
     name: 'TOUCH GRASS',
     desc: 'for when the group chat goes outside',
     vibeLine: 'feel-good \u00b7 summer hits \u00b7 throwbacks',
-    emoji: '\ud83c\udf3b',
-    gradient: ['#164e63', '#38bdf8'],
+    imageUrl:
+      'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=112&h=112&fit=crop&auto=format',
   },
 ];
 
@@ -424,21 +423,16 @@ export default function DashboardClient({
         <div className="px-4 pt-2 pb-6">
           <div className="relative overflow-hidden">
             {/* Decorative placeholder cards */}
-            <div className="space-y-2 opacity-40 saturate-0 pointer-events-none">
-              {VIBE_PLACEHOLDERS.slice(0, 3).map((vibe, i) => (
+            <div className="space-y-2 opacity-40 pointer-events-none">
+              {VIBE_PLACEHOLDERS.slice(0, 5).map((vibe, i) => (
                 <div
                   key={vibe.name}
                   className="glass rounded-2xl p-3.5 w-full text-left"
-                  style={i >= 1 ? { filter: `blur(${i * 1.5}px)` } : undefined}
+                  style={i >= 2 ? { filter: `blur(${(i - 1) * 1.5}px)` } : undefined}
                 >
                   <div className="flex items-center gap-3.5">
-                    <div
-                      className="w-14 h-14 shrink-0 rounded-lg overflow-hidden flex items-center justify-center text-2xl"
-                      style={{
-                        background: `linear-gradient(135deg, ${vibe.gradient[0]}, ${vibe.gradient[1]})`,
-                      }}
-                    >
-                      {vibe.emoji}
+                    <div className="w-14 h-14 shrink-0 rounded-lg overflow-hidden">
+                      <img src={vibe.imageUrl} alt="" className="w-full h-full object-cover" />
                     </div>
                     <div className="flex-1 min-w-0">
                       <p className="text-[15px] font-semibold truncate text-text-primary leading-tight">
@@ -610,6 +604,8 @@ export default function DashboardClient({
                   onChange={(e) => setCreateName(e.target.value)}
                   placeholder="My Swaplist"
                   className="input-glass w-full"
+                  autoComplete="off"
+                  enterKeyHint="next"
                 />
               </div>
             </div>
@@ -666,12 +662,16 @@ export default function DashboardClient({
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-tertiary" />
                 <input
-                  type="text"
+                  type="search"
                   value={playlistFilter}
                   onChange={(e) => setPlaylistFilter(e.target.value)}
                   placeholder="Filter playlists..."
                   className="w-full input-glass"
                   style={{ paddingLeft: '2.5rem' }}
+                  enterKeyHint="search"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  spellCheck={false}
                 />
               </div>
             </div>

src/app/playlist/[playlistId]/settings/page.tsx

@@ -131,12 +131,14 @@ export default function PlaylistSettingsPage() {
             <input
               id="maxTracksPerUser"
               type="number"
+              inputMode="numeric"
               min="1"
               max="50"
               value={maxTracksPerUser}
               onChange={(e) => setMaxTracksPerUser(e.target.value)}
               placeholder="Unlimited"
               className="input-glass w-full"
+              enterKeyHint="done"
             />
             <p className="text-sm text-text-tertiary mt-1.5">
               Limit how many active tracks each member can have. Leave blank for unlimited.
@@ -197,11 +199,13 @@ export default function PlaylistSettingsPage() {
             <input
               id="maxTrackAgeDays"
               type="number"
+              inputMode="numeric"
               min={0}
               max={365}
               value={maxTrackAgeDays}
               onChange={(e) => setMaxTrackAgeDays(Number(e.target.value))}
               className="input-glass w-full"
+              enterKeyHint="done"
             />
             {maxTrackAgeDays > 0 && (
               <p className="text-sm text-text-tertiary mt-2">

src/app/playlist/join/JoinPlaylistClient.tsx

@@ -140,6 +140,11 @@ function JoinPlaylistContent() {
                   onChange={(e) => setCode(e.target.value)}
                   placeholder="Enter invite code"
                   className="input-glass flex-1"
+                  enterKeyHint="go"
+                  autoComplete="off"
+                  autoCapitalize="off"
+                  autoCorrect="off"
+                  spellCheck={false}
                 />
                 <button
                   onClick={() => lookupCode(code)}

src/app/profile/ProfileClient.tsx

@@ -436,6 +436,8 @@ function ProfileContent({ user, stats }: ProfileClientProps) {
                       onChange={(e) => setEmailInput(e.target.value)}
                       required
                       autoFocus
+                      autoComplete="email"
+                      enterKeyHint="send"
                     />
                     <button
                       type="submit"

src/app/verify-email/VerifyEmailClient.tsx

@@ -204,6 +204,8 @@ export default function VerifyEmailClient({
                 className="input-glass w-full"
                 required
                 autoFocus
+                autoComplete="email"
+                enterKeyHint="send"
               />
 
               {error && <p className="text-sm text-danger text-center">{error}</p>}

src/components/AddMemberWizard.tsx

@@ -11,6 +11,7 @@ import {
   ExternalLink,
   AlertCircle,
   Link2,
+  Share2,
 } from 'lucide-react';
 import { toast } from 'sonner';
 import GlassDrawer from '@/components/ui/glass-drawer';
@@ -72,6 +73,20 @@ export default function AddMemberWizard({
     });
   }
 
+  async function handleNativeShare() {
+    const link = `${window.location.origin}/circle/join?code=${inviteCode}`;
+    try {
+      await navigator.share({
+        title: 'Join my circle on Swapify',
+        text: `Use code: ${inviteCode}`,
+        url: link,
+      });
+    } catch {
+      // User cancelled or share API unavailable — fall back to copy
+      handleCopyShareLink();
+    }
+  }
+
   async function handleSendEmail() {
     if (!email.trim()) return;
     setIsSending(true);
@@ -224,47 +239,53 @@ export default function AddMemberWizard({
                   Send this code to your friend so they can join your circle in Swapify.
                 </p>
 
-                {/* Invite code display */}
-                <div className="glass rounded-xl p-5 text-center">
+                {/* Invite code display — tap to copy */}
+                <button
+                  type="button"
+                  onClick={handleCopy}
+                  className="glass rounded-xl px-5 py-4 w-full flex items-center justify-between gap-3 group active:scale-[0.98] transition-transform"
+                >
                   <code className="text-2xl font-mono font-bold text-text-primary tracking-[0.2em] select-all">
                     {inviteCode}
                   </code>
+                  <span className="shrink-0 text-text-secondary group-hover:text-text-primary transition-colors">
+                    {copied ? (
+                      <Check className="w-5 h-5 text-accent-green" />
+                    ) : (
+                      <Copy className="w-5 h-5" />
+                    )}
+                  </span>
+                </button>
+
+                {/* Share actions */}
+                <div className="flex gap-2">
                   <button
                     type="button"
-                    onClick={handleCopy}
-                    className="mt-3 mx-auto btn-pill btn-pill-secondary flex items-center gap-2 text-sm"
+                    onClick={handleCopyShareLink}
+                    className="flex-1 flex items-center justify-center gap-1.5 rounded-lg py-2 text-sm text-text-secondary hover:text-text-primary hover:bg-white/5 transition-colors"
                   >
-                    {copied ? (
+                    {linkCopied ? (
                       <>
-                        <Check className="w-4 h-4 text-green-400" />
-                        Copied!
+                        <Check className="w-3.5 h-3.5 text-accent-green" />
+                        <span className="text-accent-green">Copied!</span>
                       </>
                     ) : (
                       <>
-                        <Copy className="w-4 h-4" />
-                        Copy Code
+                        <Link2 className="w-3.5 h-3.5" />
+                        Copy Link
                       </>
                     )}
                   </button>
-                  <div className="mt-3 pt-3 border-t border-white/5">
+                  {typeof navigator !== 'undefined' && 'share' in navigator && (
                     <button
                       type="button"
-                      onClick={handleCopyShareLink}
-                      className="mx-auto btn-pill btn-pill-secondary flex items-center gap-2 text-sm"
+                      onClick={handleNativeShare}
+                      className="flex-1 flex items-center justify-center gap-1.5 rounded-lg py-2 text-sm text-text-secondary hover:text-text-primary hover:bg-white/5 transition-colors"
                     >
-                      {linkCopied ? (
-                        <>
-                          <Check className="w-4 h-4 text-green-400" />
-                          Copied!
-                        </>
-                      ) : (
-                        <>
-                          <Link2 className="w-4 h-4" />
-                          Copy Share Link
-                        </>
-                      )}
+                      <Share2 className="w-3.5 h-3.5" />
+                      Share
                     </button>
-                  </div>
+                  )}
                 </div>
 
                 {/* Or send by email */}
@@ -279,6 +300,8 @@ export default function AddMemberWizard({
                       onChange={(e) => setEmail(e.target.value)}
                       placeholder="friend@example.com"
                       className="input-glass flex-1"
+                      autoComplete="email"
+                      enterKeyHint="send"
                     />
                     <button
                       type="button"

src/components/CircleSwitcher.tsx

@@ -188,8 +188,9 @@ export default function CircleSwitcher({
         }}
         title="Your Circles"
         snapPoint="half"
+        direction="top"
       >
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 py-1">
           {circles.map((circle, index) => {
             const isActive = circle.id === activeCircleId;
             const isLoading = isSwitching === circle.id;
@@ -394,6 +395,11 @@ export default function CircleSwitcher({
                               }}
                               placeholder="Enter invite code"
                               className="input-glass flex-1"
+                              enterKeyHint="go"
+                              autoComplete="off"
+                              autoCapitalize="off"
+                              autoCorrect="off"
+                              spellCheck={false}
                             />
                             <button
                               onClick={() => lookupCircleCode(joinCode.trim())}