...
+ ...
+ ...
+ ...
+ ...
+ π΅ SoulSync - Web Mode
-Your music sync application is running in headless mode.
- -
-
Service Status
-
-
- Spotify:
- Checking...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- Media Server:
- Checking...
+
+
+
-
+
-
+
+
No track
+ Unknown Artist
+
- Soulseek:
- Checking...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Support Development
+
+
+
+
+
+
+
+
+
+
Service Status
+
+
+ Spotify
+
+
+
+ Plex
+
+
+
+ Soulseek
-
+
+
+
+
+
+
\ No newline at end of file
diff --git a/webui/static/script.js b/webui/static/script.js
index ef0fbfc2..357f49fe 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -1,26 +1,1186 @@
-function updateStatus() {
- fetch('/status')
- .then(response => response.json())
- .then(data => {
- document.getElementById('spotify-status').textContent = data.spotify ? 'Connected' : 'Disconnected';
- document.getElementById('spotify-status').className = data.spotify ? 'connected' : 'disconnected';
-
- document.getElementById('media-status').textContent = data.media_server ? 'Connected' : 'Disconnected';
- document.getElementById('media-status').className = data.media_server ? 'connected' : 'disconnected';
-
- document.getElementById('soulseek-status').textContent = data.soulseek ? 'Connected' : 'Disconnected';
- document.getElementById('soulseek-status').className = data.soulseek ? 'connected' : 'disconnected';
- })
- .catch(error => console.error('Error fetching status:', error));
+// SoulSync WebUI JavaScript - Replicating PyQt6 GUI Functionality
+
+// Global state management
+let currentPage = 'dashboard';
+let currentTrack = null;
+let isPlaying = false;
+let mediaPlayerExpanded = false;
+let donationAddressesVisible = false;
+let searchResults = [];
+let currentStream = {
+ status: 'stopped',
+ progress: 0,
+ track: null
+};
+
+// API endpoints
+const API = {
+ status: '/status',
+ config: '/config',
+ settings: '/api/settings',
+ testConnection: '/api/test-connection',
+ playlists: '/api/playlists',
+ sync: '/api/sync',
+ search: '/api/search',
+ artists: '/api/artists',
+ activity: '/api/activity',
+ stream: {
+ start: '/api/stream/start',
+ status: '/api/stream/status',
+ toggle: '/api/stream/toggle',
+ stop: '/api/stream/stop'
+ }
+};
+
+// ===============================
+// INITIALIZATION
+// ===============================
+
+document.addEventListener('DOMContentLoaded', function() {
+ console.log('SoulSync WebUI initializing...');
+
+ // Initialize components
+ initializeNavigation();
+ initializeMediaPlayer();
+ initializeDonationWidget();
+ initializeSettings();
+ initializeSearch();
+
+ // Start periodic updates
+ updateServiceStatus();
+ setInterval(updateServiceStatus, 5000); // Every 5 seconds
+
+ // Load initial data
+ loadInitialData();
+
+ console.log('SoulSync WebUI initialized successfully!');
+});
+
+// ===============================
+// NAVIGATION SYSTEM
+// ===============================
+
+function initializeNavigation() {
+ const navButtons = document.querySelectorAll('.nav-button');
+
+ navButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const page = button.getAttribute('data-page');
+ navigateToPage(page);
+ });
+ });
}
-// Initialize when page loads
-document.addEventListener('DOMContentLoaded', function() {
- // Update status immediately
- updateStatus();
+function navigateToPage(pageId) {
+ if (pageId === currentPage) return;
- // Update status every 5 seconds
- setInterval(updateStatus, 5000);
+ // Update navigation buttons
+ document.querySelectorAll('.nav-button').forEach(btn => {
+ btn.classList.remove('active');
+ });
+ document.querySelector(`[data-page="${pageId}"]`).classList.add('active');
- console.log('SoulSync Web UI loaded successfully!');
-});
\ No newline at end of file
+ // Update pages
+ document.querySelectorAll('.page').forEach(page => {
+ page.classList.remove('active');
+ });
+ document.getElementById(`${pageId}-page`).classList.add('active');
+
+ currentPage = pageId;
+
+ // Load page-specific data
+ loadPageData(pageId);
+}
+
+async function loadPageData(pageId) {
+ try {
+ switch (pageId) {
+ case 'dashboard':
+ await loadDashboardData();
+ break;
+ case 'sync':
+ await loadSyncData();
+ break;
+ case 'downloads':
+ await loadDownloadsData();
+ break;
+ case 'artists':
+ await loadArtistsData();
+ break;
+ case 'settings':
+ await loadSettingsData();
+ break;
+ }
+ } catch (error) {
+ console.error(`Error loading ${pageId} data:`, error);
+ showToast(`Failed to load ${pageId} data`, 'error');
+ }
+}
+
+// ===============================
+// SERVICE STATUS MONITORING
+// ===============================
+
+async function updateServiceStatus() {
+ try {
+ const response = await fetch(API.status);
+ const data = await response.json();
+
+ // Update sidebar status indicators
+ updateStatusIndicator('spotify', data.spotify);
+ updateStatusIndicator('media-server', data.media_server);
+ updateStatusIndicator('soulseek', data.soulseek);
+
+ // Update media server name
+ const serverName = data.active_media_server === 'plex' ? 'Plex' : 'Jellyfin';
+ document.getElementById('media-server-name').textContent = serverName;
+
+ } catch (error) {
+ console.error('Error fetching status:', error);
+ // Set all to disconnected on error
+ updateStatusIndicator('spotify', false);
+ updateStatusIndicator('media-server', false);
+ updateStatusIndicator('soulseek', false);
+ }
+}
+
+function updateStatusIndicator(service, connected) {
+ const indicator = document.getElementById(`${service}-indicator`);
+ const dot = indicator.querySelector('.status-dot');
+
+ if (connected) {
+ dot.classList.remove('disconnected');
+ dot.classList.add('connected');
+ } else {
+ dot.classList.remove('connected');
+ dot.classList.add('disconnected');
+ }
+}
+
+// ===============================
+// MEDIA PLAYER FUNCTIONALITY
+// ===============================
+
+function initializeMediaPlayer() {
+ const trackTitle = document.getElementById('track-title');
+ const playButton = document.getElementById('play-button');
+ const stopButton = document.getElementById('stop-button');
+ const volumeSlider = document.getElementById('volume-slider');
+
+ // Track title click - toggle expansion
+ trackTitle.addEventListener('click', toggleMediaPlayerExpansion);
+
+ // Media controls
+ playButton.addEventListener('click', handlePlayPause);
+ stopButton.addEventListener('click', handleStop);
+ volumeSlider.addEventListener('input', handleVolumeChange);
+
+ // Update volume slider styling
+ volumeSlider.addEventListener('input', updateVolumeSliderAppearance);
+
+ // Start stream status polling if needed
+ setInterval(updateStreamStatus, 1000);
+}
+
+function toggleMediaPlayerExpansion() {
+ if (!currentTrack) return;
+
+ const mediaPlayer = document.getElementById('media-player');
+ const expandedContent = document.getElementById('media-expanded');
+ const noTrackMessage = document.getElementById('no-track-message');
+
+ mediaPlayerExpanded = !mediaPlayerExpanded;
+
+ if (mediaPlayerExpanded) {
+ mediaPlayer.style.minHeight = '145px';
+ expandedContent.classList.remove('hidden');
+ noTrackMessage.classList.add('hidden');
+ } else {
+ mediaPlayer.style.minHeight = '85px';
+ expandedContent.classList.add('hidden');
+ }
+}
+
+function setTrackInfo(track) {
+ currentTrack = track;
+
+ document.getElementById('track-title').textContent = track.title || 'Unknown Track';
+ document.getElementById('artist-name').textContent = track.artist || 'Unknown Artist';
+ document.getElementById('album-name').textContent = track.album || 'Unknown Album';
+
+ // Enable controls
+ document.getElementById('play-button').disabled = false;
+ document.getElementById('stop-button').disabled = false;
+
+ // Hide no track message
+ document.getElementById('no-track-message').classList.add('hidden');
+
+ // Auto-expand if collapsed
+ if (!mediaPlayerExpanded) {
+ toggleMediaPlayerExpansion();
+ }
+}
+
+function clearTrack() {
+ currentTrack = null;
+ isPlaying = false;
+
+ document.getElementById('track-title').textContent = 'No track';
+ document.getElementById('artist-name').textContent = 'Unknown Artist';
+ document.getElementById('album-name').textContent = 'Unknown Album';
+ document.getElementById('play-button').textContent = 'β·';
+ document.getElementById('play-button').disabled = true;
+ document.getElementById('stop-button').disabled = true;
+
+ // Hide loading animation
+ hideLoadingAnimation();
+
+ // Show no track message and collapse if expanded
+ document.getElementById('no-track-message').classList.remove('hidden');
+ if (mediaPlayerExpanded) {
+ toggleMediaPlayerExpansion();
+ }
+}
+
+function setPlayingState(playing) {
+ isPlaying = playing;
+ const playButton = document.getElementById('play-button');
+ playButton.textContent = playing ? 'βΈοΈ' : 'β·';
+}
+
+async function handlePlayPause() {
+ if (!currentTrack) return;
+
+ try {
+ const response = await fetch(API.stream.toggle, { method: 'POST' });
+ const data = await response.json();
+
+ if (data.error) {
+ showToast(`Playback error: ${data.error}`, 'error');
+ } else {
+ setPlayingState(data.playing);
+ }
+ } catch (error) {
+ console.error('Error toggling playback:', error);
+ showToast('Failed to toggle playback', 'error');
+ }
+}
+
+async function handleStop() {
+ try {
+ const response = await fetch(API.stream.stop, { method: 'POST' });
+ const data = await response.json();
+
+ if (data.error) {
+ showToast(`Stop error: ${data.error}`, 'error');
+ } else {
+ clearTrack();
+ currentStream.status = 'stopped';
+ }
+ } catch (error) {
+ console.error('Error stopping playback:', error);
+ showToast('Failed to stop playback', 'error');
+ }
+}
+
+function handleVolumeChange(event) {
+ const volume = event.target.value;
+ updateVolumeSliderAppearance();
+
+ // Send volume change to backend
+ fetch('/api/media/volume', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ volume: volume / 100 })
+ }).catch(error => console.error('Error setting volume:', error));
+}
+
+function updateVolumeSliderAppearance() {
+ const slider = document.getElementById('volume-slider');
+ const value = slider.value;
+ slider.style.setProperty('--volume-percent', `${value}%`);
+}
+
+function showLoadingAnimation() {
+ document.getElementById('loading-animation').classList.remove('hidden');
+}
+
+function hideLoadingAnimation() {
+ document.getElementById('loading-animation').classList.add('hidden');
+}
+
+function setLoadingProgress(percentage) {
+ const loadingAnimation = document.getElementById('loading-animation');
+ const progressBar = loadingAnimation.querySelector('.loading-progress');
+ const loadingText = loadingAnimation.querySelector('.loading-text');
+
+ loadingAnimation.classList.remove('hidden');
+ progressBar.style.width = `${percentage}%`;
+ loadingText.textContent = `${Math.round(percentage)}%`;
+}
+
+async function updateStreamStatus() {
+ try {
+ const response = await fetch(API.stream.status);
+ const data = await response.json();
+
+ if (data.track && currentStream.status !== data.status) {
+ currentStream = data;
+
+ switch (data.status) {
+ case 'loading':
+ setLoadingProgress(data.progress);
+ break;
+ case 'playing':
+ hideLoadingAnimation();
+ setPlayingState(true);
+ break;
+ case 'paused':
+ hideLoadingAnimation();
+ setPlayingState(false);
+ break;
+ case 'stopped':
+ clearTrack();
+ break;
+ }
+ }
+ } catch (error) {
+ // Don't log errors for stream status - it's expected when no stream is active
+ }
+}
+
+// ===============================
+// DONATION WIDGET
+// ===============================
+
+function initializeDonationWidget() {
+ const toggleButton = document.getElementById('donation-toggle');
+ toggleButton.addEventListener('click', toggleDonationAddresses);
+}
+
+function toggleDonationAddresses() {
+ const addresses = document.getElementById('donation-addresses');
+ const toggleButton = document.getElementById('donation-toggle');
+
+ donationAddressesVisible = !donationAddressesVisible;
+
+ if (donationAddressesVisible) {
+ addresses.classList.remove('hidden');
+ toggleButton.textContent = 'Hide';
+ } else {
+ addresses.classList.add('hidden');
+ toggleButton.textContent = 'Show';
+ }
+}
+
+function openKofi() {
+ window.open('https://ko-fi.com/boulderbadgedad', '_blank');
+ console.log('Opening Ko-fi link');
+}
+
+async function copyAddress(address, cryptoName) {
+ try {
+ await navigator.clipboard.writeText(address);
+ showToast(`${cryptoName} address copied to clipboard`, 'success');
+ console.log(`Copied ${cryptoName} address: ${address}`);
+ } catch (error) {
+ console.error('Failed to copy address:', error);
+ showToast(`Failed to copy ${cryptoName} address`, 'error');
+ }
+}
+
+// ===============================
+// SETTINGS FUNCTIONALITY
+// ===============================
+
+function initializeSettings() {
+ const saveButton = document.getElementById('save-settings');
+ const mediaServerType = document.getElementById('media-server-type');
+
+ saveButton.addEventListener('click', saveSettings);
+ mediaServerType.addEventListener('change', updateMediaServerFields);
+}
+
+async function loadSettingsData() {
+ try {
+ const response = await fetch(API.settings);
+ const settings = await response.json();
+
+ // Populate Spotify settings
+ document.getElementById('spotify-client-id').value = settings.spotify?.client_id || '';
+ document.getElementById('spotify-client-secret').value = settings.spotify?.client_secret || '';
+
+ // Populate Tidal settings
+ document.getElementById('tidal-client-id').value = settings.tidal?.client_id || '';
+ document.getElementById('tidal-client-secret').value = settings.tidal?.client_secret || '';
+
+ // Populate Plex settings
+ document.getElementById('plex-url').value = settings.plex?.base_url || '';
+ document.getElementById('plex-token').value = settings.plex?.token || '';
+
+ // Populate Jellyfin settings
+ document.getElementById('jellyfin-url').value = settings.jellyfin?.base_url || '';
+ document.getElementById('jellyfin-api-key').value = settings.jellyfin?.api_key || '';
+
+ // Set active server and toggle visibility
+ const activeServer = settings.active_media_server || 'plex';
+ toggleServer(activeServer);
+
+ // Populate Soulseek settings
+ document.getElementById('soulseek-url').value = settings.soulseek?.slskd_url || '';
+ document.getElementById('soulseek-api-key').value = settings.soulseek?.api_key || '';
+
+ // Populate Download settings (right column)
+ document.getElementById('preferred-quality').value = settings.settings?.audio_quality || 'flac';
+ document.getElementById('download-path').value = settings.soulseek?.download_path || './downloads';
+ document.getElementById('transfer-path').value = settings.soulseek?.transfer_path || './Transfer';
+
+ // Populate Database settings
+ document.getElementById('max-workers').value = settings.database?.max_workers || '5';
+
+ // Populate Metadata Enhancement settings
+ document.getElementById('metadata-enabled').checked = settings.metadata_enhancement?.enabled !== false;
+ document.getElementById('embed-album-art').checked = settings.metadata_enhancement?.embed_album_art !== false;
+
+ // Populate Playlist Sync settings
+ document.getElementById('create-backup').checked = settings.playlist_sync?.create_backup !== false;
+
+ // Populate Logging information (read-only)
+ document.getElementById('log-level-display').textContent = settings.logging?.level || 'INFO';
+ document.getElementById('log-path-display').textContent = settings.logging?.path || 'logs/app.log';
+
+ } catch (error) {
+ console.error('Error loading settings:', error);
+ showToast('Failed to load settings', 'error');
+ }
+}
+
+function updateMediaServerFields() {
+ const serverType = document.getElementById('media-server-type').value;
+ const urlInput = document.getElementById('media-server-url');
+ const tokenInput = document.getElementById('media-server-token');
+
+ if (serverType === 'plex') {
+ urlInput.placeholder = 'http://localhost:32400';
+ tokenInput.placeholder = 'Plex Token';
+ } else {
+ urlInput.placeholder = 'http://localhost:8096';
+ tokenInput.placeholder = 'Jellyfin API Key';
+ }
+}
+
+function toggleServer(serverType) {
+ // Update toggle buttons
+ document.getElementById('plex-toggle').classList.remove('active');
+ document.getElementById('jellyfin-toggle').classList.remove('active');
+ document.getElementById(`${serverType}-toggle`).classList.add('active');
+
+ // Show/hide server containers
+ document.getElementById('plex-container').classList.toggle('hidden', serverType !== 'plex');
+ document.getElementById('jellyfin-container').classList.toggle('hidden', serverType !== 'jellyfin');
+}
+
+async function saveSettings() {
+ // Determine active server from toggle buttons
+ const activeServer = document.getElementById('plex-toggle').classList.contains('active') ? 'plex' : 'jellyfin';
+
+ const settings = {
+ active_media_server: activeServer,
+ spotify: {
+ client_id: document.getElementById('spotify-client-id').value,
+ client_secret: document.getElementById('spotify-client-secret').value
+ },
+ tidal: {
+ client_id: document.getElementById('tidal-client-id').value,
+ client_secret: document.getElementById('tidal-client-secret').value
+ },
+ plex: {
+ base_url: document.getElementById('plex-url').value,
+ token: document.getElementById('plex-token').value
+ },
+ jellyfin: {
+ base_url: document.getElementById('jellyfin-url').value,
+ api_key: document.getElementById('jellyfin-api-key').value
+ },
+ soulseek: {
+ slskd_url: document.getElementById('soulseek-url').value,
+ api_key: document.getElementById('soulseek-api-key').value,
+ download_path: document.getElementById('download-path').value,
+ transfer_path: document.getElementById('transfer-path').value
+ },
+ settings: {
+ audio_quality: document.getElementById('preferred-quality').value
+ },
+ database: {
+ max_workers: parseInt(document.getElementById('max-workers').value)
+ },
+ metadata_enhancement: {
+ enabled: document.getElementById('metadata-enabled').checked,
+ embed_album_art: document.getElementById('embed-album-art').checked
+ },
+ playlist_sync: {
+ create_backup: document.getElementById('create-backup').checked
+ }
+ };
+
+ try {
+ showLoadingOverlay('Saving settings...');
+
+ const response = await fetch(API.settings, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(settings)
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ showToast('Settings saved successfully', 'success');
+ // Trigger immediate status update
+ setTimeout(updateServiceStatus, 1000);
+ } else {
+ showToast(`Failed to save settings: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Error saving settings:', error);
+ showToast('Failed to save settings', 'error');
+ } finally {
+ hideLoadingOverlay();
+ }
+}
+
+async function testConnection(service) {
+ try {
+ showLoadingOverlay(`Testing ${service} connection...`);
+
+ const response = await fetch(API.testConnection, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ service })
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ showToast(`${service} connection successful`, 'success');
+ } else {
+ showToast(`${service} connection failed: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ console.error(`Error testing ${service} connection:`, error);
+ showToast(`Failed to test ${service} connection`, 'error');
+ } finally {
+ hideLoadingOverlay();
+ }
+}
+
+// Individual Auto-detect functions - same as GUI
+async function autoDetectPlex() {
+ try {
+ showLoadingOverlay('Auto-detecting Plex server...');
+
+ const response = await fetch('/api/detect-media-server', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ server_type: 'plex' })
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ document.getElementById('plex-url').value = result.found_url;
+ showToast(`Plex server detected: ${result.found_url}`, 'success');
+ } else {
+ showToast(result.error, 'error');
+ }
+
+ } catch (error) {
+ console.error('Error auto-detecting Plex:', error);
+ showToast('Failed to auto-detect Plex server', 'error');
+ } finally {
+ hideLoadingOverlay();
+ }
+}
+
+async function autoDetectJellyfin() {
+ try {
+ showLoadingOverlay('Auto-detecting Jellyfin server...');
+
+ const response = await fetch('/api/detect-media-server', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ server_type: 'jellyfin' })
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ document.getElementById('jellyfin-url').value = result.found_url;
+ showToast(`Jellyfin server detected: ${result.found_url}`, 'success');
+ } else {
+ showToast(result.error, 'error');
+ }
+
+ } catch (error) {
+ console.error('Error auto-detecting Jellyfin:', error);
+ showToast('Failed to auto-detect Jellyfin server', 'error');
+ } finally {
+ hideLoadingOverlay();
+ }
+}
+
+async function autoDetectSlskd() {
+ try {
+ showLoadingOverlay('Auto-detecting Soulseek (slskd) server...');
+
+ const response = await fetch('/api/detect-soulseek', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' }
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ document.getElementById('soulseek-url').value = result.found_url;
+ showToast(`Soulseek server detected: ${result.found_url}`, 'success');
+ } else {
+ showToast(result.error, 'error');
+ }
+
+ } catch (error) {
+ console.error('Error auto-detecting Soulseek:', error);
+ showToast('Failed to auto-detect Soulseek server', 'error');
+ } finally {
+ hideLoadingOverlay();
+ }
+}
+
+
+function cancelDetection(service) {
+ const progressDiv = document.getElementById(`${service}-detection-progress`);
+ progressDiv.classList.add('hidden');
+ showToast(`${service} detection cancelled`, 'error');
+}
+
+function updateStatusDisplays() {
+ // Update status displays based on current service status
+ // This would be called after status updates
+ const services = ['spotify', 'media-server', 'soulseek'];
+ services.forEach(service => {
+ const display = document.getElementById(`${service}-status-display`);
+ if (display) {
+ // Status will be updated by the regular status monitoring
+ }
+ });
+}
+
+async function authenticateTidal() {
+ try {
+ showLoadingOverlay('Starting Tidal authentication...');
+ // This would trigger the OAuth flow
+ showToast('Tidal authentication started', 'success');
+ // In a real implementation, this would open the OAuth URL
+ window.open('/auth/tidal', '_blank');
+ } catch (error) {
+ console.error('Error authenticating Tidal:', error);
+ showToast('Failed to start Tidal authentication', 'error');
+ } finally {
+ hideLoadingOverlay();
+ }
+}
+
+function browsePath(pathType) {
+ showToast(`Path browser not available in web interface. Please enter path manually.`, 'error');
+}
+
+
+// ===============================
+// SEARCH FUNCTIONALITY
+// ===============================
+
+function initializeSearch() {
+ const searchInput = document.getElementById('search-input');
+ const searchButton = document.getElementById('search-button');
+
+ searchButton.addEventListener('click', performSearch);
+ searchInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') performSearch();
+ });
+}
+
+async function performSearch() {
+ const query = document.getElementById('search-input').value.trim();
+ if (!query) {
+ showToast('Please enter a search term', 'error');
+ return;
+ }
+
+ try {
+ showLoadingOverlay('Searching...');
+ displaySearchResults([]); // Clear previous results
+
+ const response = await fetch(API.search, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ query })
+ });
+
+ const data = await response.json();
+
+ if (data.error) {
+ showToast(`Search error: ${data.error}`, 'error');
+ return;
+ }
+
+ searchResults = data.results || [];
+ displaySearchResults(searchResults);
+
+ if (searchResults.length === 0) {
+ showToast('No results found', 'error');
+ } else {
+ showToast(`Found ${searchResults.length} results`, 'success');
+ }
+
+ } catch (error) {
+ console.error('Error performing search:', error);
+ showToast('Search failed', 'error');
+ } finally {
+ hideLoadingOverlay();
+ }
+}
+
+function displaySearchResults(results) {
+ const resultsContainer = document.getElementById('search-results');
+
+ if (!results.length) {
+ resultsContainer.innerHTML = 'Available Endpoints
- + +
+
+
+
+
+
+
+
+ Dashboard
+
+
+
+
+
+
+
+ Recent Activity
+
+
+
+ Just now
+ Web UI initialized
+
+
+
+
+
+ 0
+ Tracks Synced
+
+
+ 0
+ Downloads
+
+
+ 3
+ Services
+
+
+
+
+
+
+ Sync
+
+
+
+
+
+ Select Playlist
+ + +
+
+
+
+
+
+ Search & Download
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Artists
+
+
+
+
+
+
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ API Configuration
+ + +
+
+
+
+ Spotify
+
+
+
+
+
+
+
+
+
+
+ Required Redirect URI:
+ http://127.0.0.1:8888/callback
+ Add this URL to your Spotify app's 'Redirect URIs' in the Spotify Developer Dashboard
+
+
+
+
+ Tidal
+
+
+
+
+
+
+
+
+
+
+ Required Redirect URI:
+ http://127.0.0.1:8889/tidal/callback
+ Add this URL to your Tidal app configuration
+
+
+
+
+
+
+
+
+ Soulseek
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Server Connections
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Download Settings
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Database Settings
+ +
+
+
+
+
+ Number of parallel threads for database updates. Higher values = faster updates but more server load.
+
+
+
+
+ π΅ Metadata Enhancement
+ +
+
+
+
+
+
+
+
+
+
+
+ MP3, FLAC, MP4/M4A, OGG
+
+
+
+
+ Playlist Sync Settings
+ +
+
+
+
+
+ Logging Information
+ +
+
+
+
+ DEBUG
+
+
+
+ logs/app.log
+
+
+
+ No search results
';
+ return;
+ }
+
+ resultsContainer.innerHTML = results.map((result, index) => {
+ const isAlbum = result.type === 'album';
+ const sizeText = isAlbum ?
+ `${result.track_count || 0} tracks, ${(result.size_mb || 0).toFixed(1)} MB` :
+ `${(result.file_size / 1024 / 1024).toFixed(1)} MB, ${result.bitrate || 0}kbps`;
+
+ return `
+
+
+ `;
+ }).join('');
+}
+
+function selectResult(index) {
+ const result = searchResults[index];
+ if (!result) return;
+
+ console.log('Selected result:', result);
+ // Could show detailed view or additional actions here
+}
+
+async function startStream(index) {
+ const result = searchResults[index];
+ if (!result || result.type === 'album') {
+ showToast('Cannot stream albums (yet)', 'error');
+ return;
+ }
+
+ try {
+ showLoadingAnimation();
+
+ const streamData = {
+ username: result.username,
+ filename: result.filename,
+ title: result.title,
+ artist: result.artist,
+ album: result.album,
+ quality: result.quality,
+ bitrate: result.bitrate,
+ duration: result.duration,
+ size_mb: result.file_size / 1024 / 1024
+ };
+
+ const response = await fetch(API.stream.start, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(streamData)
+ });
+
+ const data = await response.json();
+
+ if (data.error) {
+ hideLoadingAnimation();
+ showToast(`Stream error: ${data.error}`, 'error');
+ } else {
+ setTrackInfo(data.track);
+ currentStream.status = 'loading';
+ showToast('Starting stream...', 'success');
+ }
+ } catch (error) {
+ hideLoadingAnimation();
+ console.error('Error starting stream:', error);
+ showToast('Failed to start stream', 'error');
+ }
+}
+
+async function startDownload(index) {
+ const result = searchResults[index];
+ if (!result) return;
+
+ try {
+ const response = await fetch('/api/downloads/start', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(result)
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ showToast('Download started', 'success');
+ } else {
+ showToast(`Download failed: ${data.error}`, 'error');
+ }
+ } catch (error) {
+ console.error('Error starting download:', error);
+ showToast('Failed to start download', 'error');
+ }
+}
+
+// ===============================
+// PAGE DATA LOADING
+// ===============================
+
+async function loadInitialData() {
+ try {
+ // Load dashboard data by default
+ await loadDashboardData();
+ } catch (error) {
+ console.error('Error loading initial data:', error);
+ }
+}
+
+async function loadDashboardData() {
+ try {
+ const response = await fetch(API.activity);
+ const data = await response.json();
+
+ const activityFeed = document.getElementById('activity-feed');
+ if (data.activities && data.activities.length) {
+ activityFeed.innerHTML = data.activities.map(activity => `
+
+
+
+
+ ${escapeHtml(result.title)}
+ ${escapeHtml(result.artist)}
+ ${result.album ? `${escapeHtml(result.album)}
` : ''}
+
+
+
+
+
+ ${sizeText}
+ by ${escapeHtml(result.username)}
+ ${result.quality ? `${escapeHtml(result.quality)}` : ''}
+
+
+ ${activity.time}
+ ${escapeHtml(activity.text)}
+
+ `).join('');
+ }
+ } catch (error) {
+ console.error('Error loading dashboard data:', error);
+ }
+}
+
+async function loadSyncData() {
+ try {
+ const response = await fetch(API.playlists);
+ const data = await response.json();
+
+ const playlistSelector = document.getElementById('playlist-selector');
+ if (data.playlists && data.playlists.length) {
+ playlistSelector.innerHTML = [
+ '',
+ ...data.playlists.map(playlist =>
+ ``
+ )
+ ].join('');
+ } else {
+ playlistSelector.innerHTML = '';
+ }
+ } catch (error) {
+ console.error('Error loading sync data:', error);
+ document.getElementById('playlist-selector').innerHTML = '';
+ }
+}
+
+async function loadDownloadsData() {
+ // Downloads page loads search results dynamically
+ console.log('Downloads page loaded');
+}
+
+async function loadArtistsData() {
+ try {
+ const response = await fetch(API.artists);
+ const data = await response.json();
+
+ const artistsGrid = document.getElementById('artists-grid');
+ if (data.artists && data.artists.length) {
+ artistsGrid.innerHTML = data.artists.map(artist => `
+
+
+ `).join('');
+ } else {
+ artistsGrid.innerHTML = '
+ ${artist.image ?
+ `
` :
+ '
+ π΅
'
+ }
+
+
+ ${escapeHtml(artist.name)}
+ ${artist.album_count || 0} albums
+ No artists found
';
+ }
+ } catch (error) {
+ console.error('Error loading artists data:', error);
+ document.getElementById('artists-grid').innerHTML = 'Error loading artists
';
+ }
+}
+
+// ===============================
+// UTILITY FUNCTIONS
+// ===============================
+
+function showLoadingOverlay(message = 'Loading...') {
+ const overlay = document.getElementById('loading-overlay');
+ const messageElement = overlay.querySelector('.loading-message');
+ messageElement.textContent = message;
+ overlay.classList.remove('hidden');
+}
+
+function hideLoadingOverlay() {
+ document.getElementById('loading-overlay').classList.add('hidden');
+}
+
+function showToast(message, type = 'success') {
+ const container = document.getElementById('toast-container');
+ const toast = document.createElement('div');
+ toast.className = `toast ${type}`;
+ toast.textContent = message;
+
+ container.appendChild(toast);
+
+ // Auto-remove after 3 seconds
+ setTimeout(() => {
+ if (container.contains(toast)) {
+ container.removeChild(toast);
+ }
+ }, 3000);
+}
+
+function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+}
+
+function showVersionInfo() {
+ showToast('Version info modal not implemented yet', 'error');
+}
+
+// ===============================
+// ADDITIONAL STYLES FOR SEARCH RESULTS
+// ===============================
+
+// Add dynamic styles for search results (since they're created dynamically)
+const additionalStyles = `
+
+`;
+
+// Inject additional styles
+document.head.insertAdjacentHTML('beforeend', additionalStyles);
+
+// Global functions (for onclick handlers)
+window.navigateToPage = navigateToPage;
+window.openKofi = openKofi;
+window.copyAddress = copyAddress;
+window.showVersionInfo = showVersionInfo;
+window.testConnection = testConnection;
+window.autoDetectPlex = autoDetectPlex;
+window.autoDetectJellyfin = autoDetectJellyfin;
+window.autoDetectSlskd = autoDetectSlskd;
+window.toggleServer = toggleServer;
+window.authenticateTidal = authenticateTidal;
+window.browsePath = browsePath;
+window.selectResult = selectResult;
+window.startStream = startStream;
+window.startDownload = startDownload;
\ No newline at end of file
diff --git a/webui/static/style.css b/webui/static/style.css
index 1e9fb954..d9af4f2f 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -1,33 +1,1431 @@
-body {
- font-family: Arial, sans-serif;
- margin: 40px;
- background: #121212;
- color: white;
+/* SoulSync WebUI - Replicating PyQt6 GUI Styling */
+
+/* Reset and Base Styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
-.container {
- max-width: 800px;
- margin: 0 auto;
+body {
+ font-family: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+ background: #121212;
+ color: #ffffff;
+ overflow: hidden;
+ height: 100vh;
}
-.status {
- padding: 20px;
- background: #1e1e1e;
- border-radius: 8px;
- margin: 20px 0;
+.hidden {
+ display: none !important;
}
-.service {
- display: flex;
- justify-content: space-between;
- padding: 10px 0;
- border-bottom: 1px solid #333;
+/* Main Container Layout */
+.main-container {
+ display: flex;
+ height: 100vh;
+ width: 100vw;
}
-.connected {
- color: #4caf50;
+/* ======================================
+ SIDEBAR STYLING - Matching ModernSidebar
+ ====================================== */
+
+.sidebar {
+ width: 240px;
+ background: linear-gradient(135deg, #0d1117 0%, #121212 30%, #0a0a0a 100%);
+ border-right: 1px solid rgba(29, 185, 84, 0.1);
+ border-top-right-radius: 12px;
+ border-bottom-right-radius: 12px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
}
-.disconnected {
- color: #f44336;
+/* Sidebar Header */
+.sidebar-header {
+ height: 95px;
+ background: linear-gradient(180deg, rgba(29, 185, 84, 0.08) 0%, rgba(29, 185, 84, 0.03) 40%, transparent 100%);
+ border-bottom: 1px solid rgba(29, 185, 84, 0.15);
+ border-top-right-radius: 12px;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 4px;
+}
+
+.app-name {
+ font-family: 'SF Pro Display', -apple-system, sans-serif;
+ font-size: 20px;
+ font-weight: 700;
+ background: linear-gradient(90deg, #ffffff 0%, #1ed760 60%, #1db954 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ letter-spacing: -0.8px;
+ margin: 0;
+}
+
+.app-subtitle {
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-size: 10px;
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.65);
+ letter-spacing: 0.2px;
+ margin: 0;
+ margin-top: 2px;
+}
+
+/* Navigation Buttons */
+.sidebar-nav {
+ padding: 25px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.nav-button {
+ height: 52px;
+ width: 216px;
+ background: transparent;
+ border: none;
+ border-radius: 16px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 0 18px;
+ transition: all 0.3s ease;
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.nav-button:hover {
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
+ border-left: 2px solid rgba(255, 255, 255, 0.2);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.nav-button.active {
+ background: linear-gradient(135deg, rgba(29, 185, 84, 0.18) 0%, rgba(29, 185, 84, 0.12) 50%, rgba(29, 185, 84, 0.08) 100%);
+ border-left: 3px solid #1ed760;
+ border: 1px solid rgba(29, 185, 84, 0.2);
+}
+
+.nav-button.active:hover {
+ background: linear-gradient(135deg, rgba(29, 185, 84, 0.25) 0%, rgba(29, 185, 84, 0.18) 50%, rgba(29, 185, 84, 0.12) 100%);
+ border: 1px solid rgba(29, 185, 84, 0.3);
+}
+
+.nav-icon {
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ font-weight: 600;
+ border-radius: 14px;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.nav-button.active .nav-icon {
+ color: #1ed760;
+ background: linear-gradient(135deg, rgba(29, 185, 84, 0.25) 0%, rgba(30, 215, 96, 0.2) 100%);
+ border: 1px solid rgba(29, 185, 84, 0.3);
+ font-weight: 700;
+}
+
+.nav-text {
+ color: rgba(255, 255, 255, 0.8);
+ letter-spacing: 0.1px;
+}
+
+.nav-button.active .nav-text {
+ color: #1ed760;
+ font-weight: 600;
+}
+
+/* Sidebar Spacer */
+.sidebar-spacer {
+ flex: 1;
+}
+
+/* Media Player Section - Matching MediaPlayer widget */
+.media-player {
+ background: linear-gradient(180deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 50%, rgba(12, 12, 12, 1.0) 100%);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ margin: 8px 10px;
+ padding: 18px 18px 12px 18px;
+ min-height: 85px;
+ transition: all 0.3s ease;
+}
+
+.media-player:hover {
+ border: 1px solid rgba(29, 185, 84, 0.2);
+ background: linear-gradient(180deg, rgba(29, 185, 84, 0.08) 0%, rgba(26, 26, 26, 0.95) 50%, rgba(18, 18, 18, 1.0) 100%);
+}
+
+.loading-animation {
+ height: 12px;
+ margin-bottom: 12px;
+ position: relative;
+}
+
+.loading-bar {
+ height: 4px;
+ background: #2a2a2a;
+ border-radius: 2px;
+ overflow: hidden;
+ position: relative;
+}
+
+.loading-progress {
+ height: 100%;
+ background: linear-gradient(90deg, #1db954 0%, #1ed760 100%);
+ border-radius: 2px;
+ width: 0%;
+ transition: width 0.3s ease;
+}
+
+.loading-text {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ font-family: 'Segoe UI', sans-serif;
+ font-size: 7px;
+ font-weight: 500;
+ color: #b4b4b4;
+ line-height: 8px;
+}
+
+.media-header {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ margin-bottom: 8px;
+}
+
+.media-info {
+ flex: 1;
+ min-width: 0;
+}
+
+.track-title {
+ font-family: 'Spotify Circular', 'SF Pro Display', -apple-system, sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ color: #ffffff;
+ letter-spacing: -0.3px;
+ line-height: 1.2;
+ margin-bottom: 2px;
+ cursor: pointer;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.track-title:hover {
+ color: #1ed760;
+ text-decoration: underline;
+}
+
+.artist-name {
+ font-family: 'Spotify Circular', -apple-system, sans-serif;
+ font-size: 11px;
+ font-weight: 400;
+ color: #b3b3b3;
+ letter-spacing: 0.1px;
+ margin-top: 1px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.play-button {
+ width: 40px;
+ height: 40px;
+ border-radius: 20px;
+ background: #1ed760;
+ border: none;
+ color: #000000;
+ font-size: 16px;
+ font-weight: 900;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+}
+
+.play-button:hover:not(:disabled) {
+ background: #1fdf64;
+ transform: scale(1.05);
+}
+
+.play-button:active:not(:disabled) {
+ background: #1ca851;
+ transform: scale(0.95);
+}
+
+.play-button:disabled {
+ background: #535353;
+ color: #b3b3b3;
+ cursor: not-allowed;
+}
+
+.media-expanded {
+ margin-top: 2px;
+}
+
+.album-name {
+ font-family: 'Spotify Circular', -apple-system, sans-serif;
+ font-size: 11px;
+ font-weight: 400;
+ color: #a7a7a7;
+ letter-spacing: 0.1px;
+ margin-bottom: 4px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.media-controls {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 6px;
+}
+
+.volume-control {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.volume-icon {
+ color: #b3b3b3;
+ font-size: 13px;
+}
+
+.volume-slider {
+ width: 80px;
+ height: 20px;
+ background: transparent;
+ outline: none;
+ cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-track {
+ width: 100%;
+ height: 3px;
+ background: #4f4f4f;
+ border-radius: 1px;
+}
+
+.volume-slider::-webkit-slider-thumb {
+ appearance: none;
+ width: 12px;
+ height: 12px;
+ background: #ffffff;
+ border-radius: 50%;
+ cursor: pointer;
+ margin-top: -4px;
+}
+
+.volume-slider::-webkit-slider-thumb:hover {
+ background: #1ed760;
+}
+
+.volume-slider::-webkit-slider-runnable-track {
+ background: linear-gradient(to right, #1ed760 0%, #1ed760 var(--volume-percent, 70%), #4f4f4f var(--volume-percent, 70%), #4f4f4f 100%);
+}
+
+.stop-button {
+ width: 32px;
+ height: 32px;
+ border-radius: 16px;
+ background: rgba(255, 255, 255, 0.08);
+ border: 1px solid #b3b3b3;
+ color: #ffffff;
+ font-size: 12px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+}
+
+.stop-button:hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.15);
+ border: 1px solid #ffffff;
+}
+
+.stop-button:active:not(:disabled) {
+ background: rgba(255, 255, 255, 0.25);
+}
+
+.stop-button:disabled {
+ background: transparent;
+ border: 1px solid #2a2a2a;
+ color: #535353;
+ cursor: not-allowed;
+}
+
+.no-track-message {
+ color: #6a6a6a;
+ font-size: 12px;
+ font-weight: 400;
+ text-align: center;
+ padding: 20px 16px;
+ letter-spacing: 0.2px;
+ font-family: 'Spotify Circular', -apple-system, sans-serif;
+ line-height: 1.4;
+}
+
+/* Crypto Donation Section - Matching CryptoDonationWidget */
+.crypto-donation {
+ background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
+ border-bottom-right-radius: 12px;
+ padding: 15px 0;
+}
+
+.donation-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 20px 8px 20px;
+}
+
+.donation-title {
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-size: 10px;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.9);
+ letter-spacing: 0.2px;
+}
+
+.toggle-button {
+ width: 40px;
+ height: 20px;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 10px;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 8px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.toggle-button:hover {
+ background: rgba(255, 255, 255, 0.15);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.donation-addresses {
+ padding: 0 12px;
+}
+
+.donation-item {
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 4px 12px;
+ margin: 0 0 4px 0;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.donation-item:hover {
+ background: rgba(255, 255, 255, 0.06);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.donation-name {
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-size: 9px;
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.donation-address, .donation-link {
+ font-family: 'Courier New', monospace;
+ font-size: 8px;
+ color: rgba(255, 255, 255, 0.5);
+}
+
+.donation-link {
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-style: italic;
+}
+
+/* Version Section - Matching version widget */
+.version-section {
+ height: 45px;
+ background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
+ border-radius: 8px;
+ margin: 0 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 12px 20px;
+}
+
+.version-button {
+ background: transparent;
+ border: none;
+ color: rgba(255, 255, 255, 0.6);
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-size: 10px;
+ font-weight: 500;
+ letter-spacing: 0.1px;
+ padding: 2px 8px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.version-button:hover {
+ color: #1ed760;
+ background: rgba(29, 185, 84, 0.1);
+ border: 1px solid rgba(29, 185, 84, 0.2);
+}
+
+.version-button:active {
+ background: rgba(29, 185, 84, 0.15);
+}
+
+/* Status Section - Matching status indicators */
+.status-section {
+ height: 150px;
+ background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
+ border-bottom-right-radius: 12px;
+ padding: 20px 0;
+}
+
+.status-title {
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-size: 11px;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.9);
+ letter-spacing: 0.2px;
+ padding: 0 20px 8px 20px;
+ margin-bottom: 8px;
+}
+
+.status-indicator {
+ height: 38px;
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ padding: 8px 20px;
+}
+
+.status-dot {
+ width: 18px;
+ height: 18px;
+ border-radius: 9px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 10px;
+ font-weight: 700;
+}
+
+.status-dot.connected {
+ color: #1ed760;
+ background: linear-gradient(135deg, rgba(29, 185, 84, 0.2) 0%, rgba(30, 215, 96, 0.15) 100%);
+ border: 1px solid rgba(29, 185, 84, 0.3);
+}
+
+.status-dot.connected::before {
+ content: "β";
+}
+
+.status-dot.disconnected {
+ color: #ff6b6b;
+ background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 107, 107, 0.1) 100%);
+ border: 1px solid rgba(255, 107, 107, 0.2);
+}
+
+.status-dot.disconnected::before {
+ content: "β";
+}
+
+.status-name {
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-size: 10px;
+ letter-spacing: 0.1px;
+ min-width: 85px;
+}
+
+.status-indicator:has(.connected) .status-name {
+ color: rgba(255, 255, 255, 0.95);
+ font-weight: 500;
+}
+
+.status-indicator:has(.disconnected) .status-name {
+ color: rgba(255, 255, 255, 0.5);
+ font-weight: 400;
+}
+
+/* =====================================
+ MAIN CONTENT AREA STYLING
+ ===================================== */
+
+.main-content {
+ flex: 1;
+ background: #121212;
+ overflow: auto;
+}
+
+.page {
+ display: none;
+ height: 100%;
+ padding: 40px;
+}
+
+.page.active {
+ display: block;
+}
+
+.page-header {
+ margin-bottom: 30px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ padding-bottom: 20px;
+}
+
+.page-header h2 {
+ font-family: 'SF Pro Display', -apple-system, sans-serif;
+ font-size: 28px;
+ font-weight: 700;
+ color: #ffffff;
+ margin: 0;
+ letter-spacing: -0.5px;
+}
+
+/* Dashboard Page Styling */
+.dashboard-content {
+ display: flex;
+ gap: 40px;
+ height: calc(100vh - 150px);
+}
+
+.activity-section {
+ flex: 1;
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 12px;
+ padding: 24px;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.activity-section h3 {
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-size: 16px;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.9);
+ margin-bottom: 16px;
+}
+
+.activity-feed {
+ max-height: 400px;
+ overflow-y: auto;
+}
+
+.activity-item {
+ display: flex;
+ gap: 12px;
+ padding: 12px 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.activity-time {
+ font-size: 11px;
+ color: rgba(255, 255, 255, 0.5);
+ min-width: 80px;
+}
+
+.activity-text {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.8);
+ flex: 1;
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 16px;
+ width: 300px;
+}
+
+.stat-card {
+ background: linear-gradient(135deg, rgba(29, 185, 84, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
+ border: 1px solid rgba(29, 185, 84, 0.2);
+ border-radius: 12px;
+ padding: 24px;
+ text-align: center;
+}
+
+.stat-value {
+ font-family: 'SF Pro Display', -apple-system, sans-serif;
+ font-size: 32px;
+ font-weight: 700;
+ color: #1ed760;
+ line-height: 1;
+ margin-bottom: 8px;
+}
+
+.stat-label {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.7);
+ font-weight: 500;
+}
+
+/* Settings Page Styling - Two Column Layout */
+.settings-content {
+ max-width: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.settings-columns {
+ display: flex;
+ gap: 24px;
+ margin-bottom: 32px;
+}
+
+.settings-left-column, .settings-right-column {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+}
+
+.settings-group {
+ background: #282828;
+ border: 1px solid #404040;
+ border-radius: 8px;
+ padding: 16px 16px 16px 16px;
+}
+
+.settings-group h3 {
+ font-family: 'SF Pro Text', -apple-system, sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ color: #ffffff;
+ margin-bottom: 15px;
+ margin-top: 10px;
+ padding-left: 10px;
+ padding-right: 5px;
+}
+
+/* API Service Frames */
+.api-service-frame {
+ background: #333333;
+ border: 1px solid #444444;
+ border-radius: 8px;
+ padding: 8px 12px 12px 12px;
+ margin-bottom: 12px;
+}
+
+.service-title {
+ font-family: 'Arial', sans-serif;
+ font-size: 12px;
+ font-weight: bold;
+ margin-bottom: 8px;
+ margin-top: 0;
+}
+
+.spotify-title {
+ color: #1db954;
+}
+
+.tidal-title {
+ color: #ff6600;
+}
+
+.soulseek-title {
+ color: #5dade2;
+}
+
+/* Server Toggle Buttons */
+.server-toggle-container {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 16px;
+}
+
+.server-toggle-btn {
+ flex: 1;
+ padding: 8px 16px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 6px;
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 12px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.server-toggle-btn.active {
+ background: rgba(29, 185, 84, 0.2);
+ border-color: rgba(29, 185, 84, 0.5);
+ color: #1ed760;
+ font-weight: 600;
+}
+
+.server-toggle-btn:hover {
+ background: rgba(255, 255, 255, 0.1);
+ color: #ffffff;
+}
+
+.server-toggle-btn.active:hover {
+ background: rgba(29, 185, 84, 0.3);
+}
+
+.server-config-container {
+ padding-top: 8px;
+}
+
+/* Callback Info Styling */
+.callback-info {
+ margin: 8px 0;
+}
+
+.callback-label {
+ color: #ffffff;
+ font-size: 11px;
+ margin-top: 8px;
+ margin-bottom: 4px;
+}
+
+.callback-url {
+ color: #1db954;
+ font-size: 11px;
+ font-family: 'Courier New', monospace;
+ background-color: rgba(29, 185, 84, 0.1);
+ border: 1px solid rgba(29, 185, 84, 0.3);
+ border-radius: 4px;
+ padding: 6px 8px;
+ margin-bottom: 6px;
+ user-select: all;
+ cursor: text;
+}
+
+.callback-help {
+ color: #ffffff;
+ font-size: 10px;
+ font-style: italic;
+ line-height: 1.3;
+}
+
+/* Form Styling */
+.form-group {
+ margin-bottom: 12px;
+}
+
+.form-group{
+ option{
+ color: black;
+ &:hover{
+ color: white;
+ }
+ }
+}
+
+.form-group label {
+ display: block;
+ font-size: 11px;
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: 4px;
+}
+
+.form-group input, .form-group select {
+ width: 100%;
+ padding: 8px 12px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 6px;
+ color: #ffffff;
+ font-size: 12px;
+ transition: all 0.2s ease;
+}
+
+.form-group input:focus, .form-group select:focus {
+ outline: none;
+ border-color: #1ed760;
+ background: rgba(29, 185, 84, 0.05);
+}
+
+/* Checkbox Styling */
+.checkbox-label {
+ display: flex !important;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ font-size: 12px !important;
+ margin-bottom: 0 !important;
+}
+
+.checkbox-label input[type="checkbox"] {
+ width: 16px !important;
+ height: 16px !important;
+ margin: 0 !important;
+ accent-color: #1ed760;
+ cursor: pointer;
+}
+
+/* Help Text */
+.help-text {
+ color: #ffffff;
+ font-size: 10px;
+ font-style: italic;
+ line-height: 1.3;
+ margin-top: 4px;
+}
+
+/* Supported Formats */
+.supported-formats {
+ color: #ffffff;
+ font-size: 11px;
+ background: transparent;
+ border: none;
+ padding: 4px 0;
+}
+
+/* Read-only Fields */
+.readonly-field {
+ padding: 8px 12px;
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 6px;
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 12px;
+ font-family: 'Courier New', monospace;
+}
+
+/* Form Actions */
+.form-actions {
+ display: flex;
+ gap: 8px;
+ margin-top: 8px;
+}
+
+.test-button, .detect-button {
+ padding: 6px 12px;
+ border-radius: 6px;
+ font-size: 11px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ border: none;
+ white-space: nowrap;
+}
+
+.test-button {
+ background: rgba(29, 185, 84, 0.1);
+ color: #1ed760;
+ border: 1px solid rgba(29, 185, 84, 0.3);
+}
+
+.test-button:hover {
+ background: rgba(29, 185, 84, 0.2);
+ border-color: rgba(29, 185, 84, 0.5);
+}
+
+.detect-button {
+ background: rgba(255, 255, 255, 0.05);
+ color: rgba(255, 255, 255, 0.8);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.detect-button:hover {
+ background: rgba(255, 255, 255, 0.1);
+ color: #ffffff;
+}
+
+/* Save Button */
+.save-button {
+ background: #1db954;
+ border: none;
+ border-radius: 22px;
+ color: #000000;
+ font-size: 14px;
+ font-weight: bold;
+ padding: 12px 32px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.save-button:hover {
+ background: #1ed760;
+}
+
+.settings-actions {
+ display: flex;
+ justify-content: center;
+ padding-top: 20px;
+}
+
+/* Additional Settings Components */
+.path-input-group {
+ display: flex;
+ gap: 8px;
+}
+
+.path-input-group input {
+ flex: 1;
+}
+
+.browse-button {
+ padding: 10px 16px;
+ background: rgba(255, 255, 255, 0.05);
+ color: rgba(255, 255, 255, 0.8);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ font-size: 14px;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.browse-button:hover {
+ background: rgba(255, 255, 255, 0.1);
+ color: #ffffff;
+}
+
+.auth-button {
+ background: #1db954;
+ color: #ffffff;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+}
+
+.auth-button {
+ background: #1db954;
+ color: #ffffff;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 15px;
+ font-size: 11px;
+ font-weight: 500;
+ cursor: pointer;
+ margin-top: 8px;
+}
+
+.auth-button:hover {
+ background: #1ed760;
+}
+
+.tidal-title + * .auth-button {
+ background: #ff6600;
+}
+
+.tidal-title + * .auth-button:hover {
+ background: #e55500;
+}
+
+/* API Test Buttons */
+.api-test-buttons {
+ display: flex;
+ gap: 8px;
+ margin-top: 16px;
+ flex-wrap: wrap;
+}
+
+.api-test-buttons .test-button {
+ flex: 1;
+ min-width: 80px;
+}
+
+/* Server Test Section */
+.server-test-section {
+ margin-top: 16px;
+ text-align: center;
+}
+
+.server-test-btn {
+ width: 100%;
+}
+
+.reset-button, .export-button, .import-button {
+ padding: 10px 20px;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ border: none;
+}
+
+.reset-button {
+ background: rgba(255, 107, 107, 0.1);
+ color: #ff6b6b;
+ border: 1px solid rgba(255, 107, 107, 0.3);
+}
+
+.reset-button:hover {
+ background: rgba(255, 107, 107, 0.2);
+}
+
+.export-button, .import-button {
+ background: rgba(255, 255, 255, 0.05);
+ color: rgba(255, 255, 255, 0.8);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.export-button:hover, .import-button:hover {
+ background: rgba(255, 255, 255, 0.1);
+ color: #ffffff;
+}
+
+.cancel-button {
+ padding: 6px 12px;
+ background: rgba(255, 107, 107, 0.1);
+ color: #ff6b6b;
+ border: 1px solid rgba(255, 107, 107, 0.3);
+ border-radius: 6px;
+ font-size: 12px;
+ cursor: pointer;
+ margin-top: 8px;
+}
+
+.cancel-button:hover {
+ background: rgba(255, 107, 107, 0.2);
+}
+
+.status-display {
+ margin-top: 12px;
+ padding: 8px 12px;
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 6px;
+ font-size: 12px;
+}
+
+.status-display .status-text {
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.status-display.connected .status-text {
+ color: #1ed760;
+}
+
+.status-display.error .status-text {
+ color: #ff6b6b;
+}
+
+.detection-progress {
+ margin-top: 12px;
+ padding: 12px;
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 8px;
+}
+
+.detection-progress .progress-bar {
+ width: 100%;
+ height: 6px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 3px;
+ overflow: hidden;
+ margin-bottom: 8px;
+}
+
+.detection-progress .progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, #1db954 0%, #1ed760 100%);
+ width: 0%;
+ transition: width 0.3s ease;
+ animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.7; }
+}
+
+.detection-progress .progress-text {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: 8px;
+}
+
+/* Form styling improvements */
+.form-group input[type="checkbox"] {
+ width: auto;
+ margin-right: 8px;
+ accent-color: #1ed760;
+}
+
+.form-group input[type="number"] {
+ width: 120px;
+}
+
+.form-group select {
+ width: 200px;
+}
+
+/* Sync Page Styling */
+.sync-content {
+ max-width: 600px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.playlist-section {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 24px;
+}
+
+.playlist-section h3 {
+ font-size: 16px;
+ color: rgba(255, 255, 255, 0.9);
+ margin-bottom: 16px;
+}
+
+.playlist-selector {
+ width: 100%;
+ padding: 12px 16px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ color: #ffffff;
+ font-size: 14px;
+ margin-bottom: 16px;
+}
+
+.sync-button {
+ background: #1ed760;
+ color: #000000;
+ padding: 12px 24px;
+ border: none;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+.sync-button:hover {
+ background: #1fdf64;
+}
+
+.sync-progress {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 24px;
+}
+
+.progress-bar {
+ width: 100%;
+ height: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: 12px;
+}
+
+.progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, #1db954 0%, #1ed760 100%);
+ width: 0%;
+ transition: width 0.3s ease;
+}
+
+.progress-text {
+ text-align: center;
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 14px;
+}
+
+/* Downloads/Search Page Styling */
+.downloads-content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ height: calc(100vh - 150px);
+}
+
+.search-section {
+ display: flex;
+ gap: 12px;
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 24px;
+}
+
+.search-input {
+ flex: 1;
+ padding: 12px 16px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ color: #ffffff;
+ font-size: 14px;
+}
+
+.search-input:focus {
+ outline: none;
+ border-color: #1ed760;
+ background: rgba(29, 185, 84, 0.05);
+}
+
+.search-button {
+ background: #1ed760;
+ color: #000000;
+ padding: 12px 24px;
+ border: none;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+.search-button:hover {
+ background: #1fdf64;
+}
+
+.search-results {
+ flex: 1;
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 24px;
+ overflow-y: auto;
+}
+
+/* Artists Page Styling */
+.artists-content {
+ height: calc(100vh - 150px);
+ overflow-y: auto;
+}
+
+.artists-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 20px;
+}
+
+/* Loading Overlay */
+.loading-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+}
+
+.loading-spinner {
+ width: 40px;
+ height: 40px;
+ border: 4px solid rgba(255, 255, 255, 0.1);
+ border-top: 4px solid #1ed760;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.loading-message {
+ color: rgba(255, 255, 255, 0.8);
+ margin-top: 16px;
+ font-size: 14px;
+}
+
+/* Toast Notifications */
+.toast-container {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 10000;
+}
+
+.toast {
+ background: rgba(26, 26, 26, 0.95);
+ border: 1px solid rgba(29, 185, 84, 0.3);
+ border-radius: 8px;
+ padding: 16px 20px;
+ margin-bottom: 8px;
+ color: #ffffff;
+ font-size: 14px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ animation: slideIn 0.3s ease-out;
+}
+
+.toast.success {
+ border-color: rgba(29, 185, 84, 0.5);
+ background: linear-gradient(135deg, rgba(29, 185, 84, 0.1) 0%, rgba(26, 26, 26, 0.95) 100%);
+}
+
+.toast.error {
+ border-color: rgba(255, 107, 107, 0.5);
+ background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(26, 26, 26, 0.95) 100%);
+}
+
+@keyframes slideIn {
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+/* Desktop-Only Optimizations */
+.main-container {
+ min-width: 1200px; /* Ensure minimum desktop width */
+}
+
+.sidebar {
+ min-width: 240px; /* Fixed sidebar width for desktop */
+ max-width: 240px;
+}
+
+.main-content {
+ min-width: 960px; /* Ensure content area has enough space */
+}
+
+/* Optimize for larger screens */
+@media (min-width: 1440px) {
+ .stats-grid {
+ width: 350px; /* Wider stats on large monitors */
+ }
+
+ .settings-content {
+ max-width: 900px; /* Wider settings forms */
+ }
}
\ No newline at end of file