add top albums and top tracks widgets to profile

static/profile.js

@@ -32,18 +32,89 @@ function updateLimitOptions() {
     
     for (let option of limitSelect.options) {
         const value = parseInt(option.value);
-        if (value > maxLimit) {
+        if (value > maxLimit || (view === 'grid' && value === 7)) {
             option.style.display = 'none';
         } else {
             option.style.display = '';
         }
     }
     
-    if (parseInt(limitSelect.value) > maxLimit) {
+    if (parseInt(limitSelect.value) > maxLimit || (view === 'grid' && parseInt(limitSelect.value) === 7)) {
         limitSelect.value = maxLimit;
     }
 }
 
+function updateTopAlbums() {
+    const period = document.getElementById('album-period-select').value;
+    const limit = document.getElementById('album-limit-select').value;
+    const view = document.getElementById('album-view-select').value;
+    
+    const customDates = document.getElementById('album-custom-dates');
+    if (period === 'custom') {
+        customDates.style.display = 'inline-block';
+    } else {
+        customDates.style.display = 'none';
+    }
+    
+    const params = new URLSearchParams(window.location.search);
+    params.set('album_period', period);
+    params.set('album_limit', limit);
+    params.set('album_view', view);
+    
+    if (period === 'custom') {
+        const startDate = document.getElementById('album-start-date').value;
+        const endDate = document.getElementById('album-end-date').value;
+        if (startDate) params.set('album_start', startDate);
+        if (endDate) params.set('album_end', endDate);
+    }
+    
+    window.location.search = params.toString();
+}
+
+function updateTopAlbumsLimitOptions() {
+    const view = document.getElementById('album-view-select').value;
+    const limitSelect = document.getElementById('album-limit-select');
+    const maxLimit = view === 'grid' ? 8 : 30;
+    
+    for (let option of limitSelect.options) {
+        const value = parseInt(option.value);
+        if (value > maxLimit || (view === 'grid' && value === 7)) {
+            option.style.display = 'none';
+        } else {
+            option.style.display = '';
+        }
+    }
+    
+    if (parseInt(limitSelect.value) > maxLimit || (view === 'grid' && parseInt(limitSelect.value) === 7)) {
+        limitSelect.value = maxLimit;
+    }
+}
+
+function updateTopTracks() {
+    const period = document.getElementById('track-period-select').value;
+    const limit = document.getElementById('track-limit-select').value;
+    
+    const customDates = document.getElementById('track-custom-dates');
+    if (period === 'custom') {
+        customDates.style.display = 'inline-block';
+    } else {
+        customDates.style.display = 'none';
+    }
+    
+    const params = new URLSearchParams(window.location.search);
+    params.set('track_period', period);
+    params.set('track_limit', limit);
+    
+    if (period === 'custom') {
+        const startDate = document.getElementById('track-start-date').value;
+        const endDate = document.getElementById('track-end-date').value;
+        if (startDate) params.set('track_start', startDate);
+        if (endDate) params.set('track_end', endDate);
+    }
+    
+    window.location.search = params.toString();
+}
+
 function syncGridHeights() {}
 
 document.addEventListener('DOMContentLoaded', function() {
@@ -57,4 +128,6 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     updateLimitOptions();
+    
+    updateTopAlbumsLimitOptions();
 });

static/style.css

@@ -770,6 +770,22 @@ a.button:hover {
   border-radius: 10px;
 }
 
+.top-albums {
+  width: 50%;
+  margin: 15px 0;
+  padding: 10px;
+  background: #1a1a1a;
+  border-radius: 10px;
+}
+
+.top-tracks {
+  width: 50%;
+  margin: 15px 0;
+  padding: 10px;
+  background: #1a1a1a;
+  border-radius: 10px;
+}
+
 .top-artists-controls {
   display: flex;
   flex-direction: column;
@@ -777,13 +793,34 @@ a.button:hover {
   margin-bottom: 10px;
 }
 
+.top-albums-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.top-tracks-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
 #top-artists-display {
   min-height: 150px;
 }
 
+#top-albums-display {
+  min-height: 150px;
+}
+
+#top-tracks-display {
+  min-height: 150px;
+}
+
 .top-artists-controls h3 {
   margin: 0;
-  color: #fff;
 }
 
 .controls-row {