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/App.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { ThemeProvider } from './contexts/ThemeContext.jsx'
+import { SpotifyProvider } from './contexts/SpotifyContext.jsx'
 import TopBar from './components/layout/TopBar.jsx'
 import TabNav from './components/layout/TabNav.jsx'
 import Overview from './pages/Overview.jsx'
@@ -20,13 +21,15 @@ export default function App() {
 
   return (
     <ThemeProvider>
-      <div style={styles.app}>
-        <TopBar />
-        <TabNav activeTab={tab} onTabChange={setTab} />
-        <main style={styles.main}>
-          <Page />
-        </main>
-      </div>
+      <SpotifyProvider>
+        <div style={styles.app}>
+          <TopBar />
+          <TabNav activeTab={tab} onTabChange={setTab} />
+          <main style={styles.main}>
+            <Page />
+          </main>
+        </div>
+      </SpotifyProvider>
     </ThemeProvider>
   )
 }