denshooter
beeee82896
- 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>
53 lines
1.2 KiB
JavaScript
53 lines
1.2 KiB
JavaScript
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'
|
|
import Navigation from './pages/Navigation.jsx'
|
|
import Audio from './pages/Audio.jsx'
|
|
import Systems from './pages/Systems.jsx'
|
|
|
|
const PAGES = {
|
|
overview: Overview,
|
|
navigation: Navigation,
|
|
audio: Audio,
|
|
systems: Systems,
|
|
}
|
|
|
|
export default function App() {
|
|
const [tab, setTab] = useState('overview')
|
|
const Page = PAGES[tab] || Overview
|
|
|
|
return (
|
|
<ThemeProvider>
|
|
<SpotifyProvider>
|
|
<div style={styles.app}>
|
|
<TopBar />
|
|
<TabNav activeTab={tab} onTabChange={setTab} />
|
|
<main style={styles.main}>
|
|
<Page />
|
|
</main>
|
|
</div>
|
|
</SpotifyProvider>
|
|
</ThemeProvider>
|
|
)
|
|
}
|
|
|
|
const styles = {
|
|
app: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100vh',
|
|
overflow: 'hidden',
|
|
background: 'var(--bg)',
|
|
},
|
|
main: {
|
|
flex: 1,
|
|
overflow: 'hidden',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: 0,
|
|
},
|
|
}
|