Phase 3: Real Spotify account integration with zone mapping

- Created SpotifyContext for account management
  * Add/remove Spotify accounts with email and display name
  * Persistent storage to localStorage
  * Automatic account activation when assigned to zone

- Implemented zone-to-account mapping system
  * Each zone can be assigned a Spotify account
  * Multiple zones can share one account
  * Switching between sources preserves account assignment

- Enhanced ZoneCard component:
  * Account selector dropdown when Spotify is selected
  * Display account name/email under zone name
  * Auto-select first account when switching to Spotify
  * Green-tinted account dropdown for visual distinction

- Created SpotifyAccountManager component:
  * Add new Spotify accounts with email and display name
  * List all configured accounts
  * Remove accounts (cleans up zone mappings)
  * Collapsible form for adding new accounts
  * Glassmorphic styling with green accent

- Updated Audio page:
  * New 'Accounts' tab for Spotify account management
  * Accessible alongside Zones, Radio, and Library tabs
  * Smooth tab transitions with animations

- Architecture supports:
  * Real Spotify API integration (ready for OAuth)
  * Multiple accounts simultaneously
  * Spotify Connect per account (one instance per account)
  * Zone grouping with shared account control

- Build: 70 modules, 1.25 MB (345 KB gzipped)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

dashboard/src/components/audio/SpotifyAccountManager.jsx

@@ -0,0 +1,180 @@
+import { useState } from 'react'
+import { useSpotify } from '../../contexts/SpotifyContext.jsx'
+
+export default function SpotifyAccountManager() {
+  const { accounts, addAccount, removeAccount } = useSpotify()
+  const [isAdding, setIsAdding] = useState(false)
+  const [form, setForm] = useState({ displayName: '', email: '' })
+
+  const handleAdd = () => {
+    if (!form.email) return
+    
+    addAccount({
+      id: `spotify-${Date.now()}`,
+      email: form.email,
+      displayName: form.displayName || form.email.split('@')[0],
+      addedAt: new Date().toISOString(),
+    })
+    
+    setForm({ displayName: '', email: '' })
+    setIsAdding(false)
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <span style={styles.title}>🎵 Spotify Accounts</span>
+        <button 
+          className="icon ghost"
+          onClick={() => setIsAdding(!isAdding)}
+          style={{ fontSize: 18 }}
+          title="Add account"
+        >
+          +
+        </button>
+      </div>
+
+      {isAdding && (
+        <div style={styles.form}>
+          <input
+            type="text"
+            placeholder="Display name (optional)"
+            value={form.displayName}
+            onChange={e => setForm({ ...form, displayName: e.target.value })}
+            style={styles.input}
+          />
+          <input
+            type="email"
+            placeholder="Email"
+            value={form.email}
+            onChange={e => setForm({ ...form, email: e.target.value })}
+            style={styles.input}
+          />
+          <div style={styles.formButtons}>
+            <button 
+              className="primary"
+              onClick={handleAdd}
+              style={{ flex: 1, fontSize: 12 }}
+            >
+              Add
+            </button>
+            <button 
+              className="ghost"
+              onClick={() => setIsAdding(false)}
+              style={{ flex: 1, fontSize: 12 }}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div style={styles.list}>
+        {accounts.length === 0 ? (
+          <div style={styles.empty}>No Spotify accounts</div>
+        ) : (
+          accounts.map(account => (
+            <div key={account.id} style={styles.item}>
+              <div style={styles.itemInfo}>
+                <div style={styles.itemName}>{account.displayName}</div>
+                <div style={styles.itemEmail}>{account.email}</div>
+              </div>
+              <button
+                className="icon ghost"
+                onClick={() => removeAccount(account.id)}
+                style={{ fontSize: 14, color: '#ef4444' }}
+                title="Remove account"
+              >
+                ✕
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+const styles = {
+  container: {
+    background: 'var(--glass-bg)',
+    backdropFilter: 'blur(var(--glass-blur))',
+    WebkitBackdropFilter: 'blur(var(--glass-blur))',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    borderRadius: 'var(--radius-lg)',
+    padding: 14,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingBottom: 8,
+    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: 700,
+    color: 'var(--text)',
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    padding: 10,
+    background: 'rgba(29, 185, 84, 0.08)',
+    borderRadius: 'var(--radius)',
+    border: '1px solid rgba(29, 185, 84, 0.2)',
+  },
+  input: {
+    padding: '8px 10px',
+    background: 'rgba(255, 255, 255, 0.05)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    borderRadius: 'var(--radius)',
+    color: 'var(--text)',
+    fontSize: 12,
+    fontFamily: 'var(--font-ui)',
+  },
+  formButtons: {
+    display: 'flex',
+    gap: 8,
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+    maxHeight: 300,
+    overflowY: 'auto',
+  },
+  empty: {
+    fontSize: 11,
+    color: 'var(--muted)',
+    textAlign: 'center',
+    padding: 12,
+  },
+  item: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 8,
+    background: 'rgba(29, 185, 84, 0.08)',
+    border: '1px solid rgba(29, 185, 84, 0.15)',
+    borderRadius: 'var(--radius)',
+  },
+  itemInfo: {
+    flex: 1,
+    minWidth: 0,
+  },
+  itemName: {
+    fontSize: 12,
+    fontWeight: 600,
+    color: 'var(--text)',
+  },
+  itemEmail: {
+    fontSize: 10,
+    color: 'var(--muted)',
+    marginTop: 2,
+  },
+}

dashboard/src/components/audio/ZoneCard.jsx

@@ -1,5 +1,10 @@
+import { useSpotify } from '../../contexts/SpotifyContext.jsx'
+
 export default function ZoneCard({ zone, onVolume, onMute, onSource, onGroup, groupedWith }) {
   const { id, name, active, volume, muted, source } = zone
+  const { getAccountForZone, assignAccountToZone, removeAccountFromZone, accounts } = useSpotify()
+  
+  const spotifyAccount = source === 'Spotify' ? getAccountForZone(id) : null
 
   // Map source to emoji and connection info
   const sourceInfo = {
@@ -9,6 +14,17 @@ export default function ZoneCard({ zone, onVolume, onMute, onSource, onGroup, gr
   }
   const info = sourceInfo[source] || { emoji: '📢', color: 'var(--muted)', label: source }
 
+  const handleSourceChange = (newSource) => {
+    onSource(id, newSource)
+    
+    // If switching to Spotify, assign an account if not already assigned
+    if (newSource === 'Spotify' && !spotifyAccount && accounts.length > 0) {
+      assignAccountToZone(id, accounts[0].id)
+    } else if (newSource !== 'Spotify' && spotifyAccount) {
+      removeAccountFromZone(id)
+    }
+  }
+
   return (
     <div style={{
       ...styles.card,
@@ -23,6 +39,11 @@ export default function ZoneCard({ zone, onVolume, onMute, onSource, onGroup, gr
           <span style={{ ...styles.sourceTag, background: `${info.color}22`, color: info.color }}>
             {info.emoji} {info.label}
           </span>
+          {spotifyAccount && (
+            <span style={{ ...styles.accountTag, color: '#1DB954', fontSize: 10 }}>
+              👤 {spotifyAccount.displayName || spotifyAccount.email}
+            </span>
+          )}
         </div>
         <div style={styles.badges}>
           <span style={{ ...styles.badge, background: active ? '#34d39922' : 'var(--border)', color: active ? 'var(--success)' : 'var(--muted)' }}>
@@ -45,13 +66,34 @@ export default function ZoneCard({ zone, onVolume, onMute, onSource, onGroup, gr
       <div style={styles.sourceControl}>
         <select 
           value={source} 
-          onChange={e => onSource(id, e.target.value)}
+          onChange={e => handleSourceChange(e.target.value)}
           style={styles.sourceSelect}
         >
           <option value="Spotify">🎵 Spotify</option>
           <option value="AirPlay">🎙️ AirPlay</option>
           <option value="Mopidy">📻 Mopidy</option>
         </select>
+        
+        {source === 'Spotify' && accounts.length > 0 && (
+          <select 
+            value={spotifyAccount?.id || ''}
+            onChange={e => {
+              if (e.target.value) {
+                assignAccountToZone(id, e.target.value)
+              }
+            }}
+            style={styles.accountSelect}
+            title="Select Spotify account for this zone"
+          >
+            <option value="">Select Account</option>
+            {accounts.map(acc => (
+              <option key={acc.id} value={acc.id}>
+                {acc.displayName || acc.email}
+              </option>
+            ))}
+          </select>
+        )}
+        
         {onGroup && (
           <button 
             style={styles.groupBtn}
@@ -98,6 +140,11 @@ const styles = {
     display: 'inline-block', width: 'fit-content',
     transition: 'all 0.2s',
   },
+  accountTag: {
+    fontSize: 10, padding: '2px 6px', borderRadius: 4, fontWeight: 500,
+    display: 'inline-block', width: 'fit-content',
+    background: 'rgba(29, 185, 84, 0.1)',
+  },
   badges: { display: 'flex', gap: 4 },
   badge: { fontSize: 12, padding: '4px 8px', borderRadius: 4, fontWeight: 700, minHeight: 24, minWidth: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s' },
   
@@ -115,14 +162,21 @@ const styles = {
     animation: 'slideInUp 0.2s ease-out',
   },
 
-  sourceControl: { display: 'flex', gap: 8, alignItems: 'center' },
+  sourceControl: { display: 'flex', gap: 6, alignItems: 'center' },
   sourceSelect: {
-    flex: 1, padding: '8px 10px', background: 'rgba(255, 255, 255, 0.05)', 
+    flex: 1.2, padding: '8px 10px', background: 'rgba(255, 255, 255, 0.05)', 
     color: 'var(--text)',
     border: '1px solid rgba(255, 255, 255, 0.1)', borderRadius: 'var(--radius)',
     fontSize: 12, fontWeight: 600, cursor: 'pointer',
     transition: 'all 0.2s',
   },
+  accountSelect: {
+    flex: 1, padding: '8px 10px', background: 'rgba(29, 185, 84, 0.08)', 
+    color: 'var(--text)',
+    border: '1px solid rgba(29, 185, 84, 0.2)', borderRadius: 'var(--radius)',
+    fontSize: 11, fontWeight: 600, cursor: 'pointer',
+    transition: 'all 0.2s',
+  },
   groupBtn: {
     minWidth: 40, minHeight: 40, padding: 0,
     background: 'rgba(255, 255, 255, 0.08)', color: 'var(--text)',