feat(ui): add smooth collapse animation for subscriptions list

Replace display toggle with CSS transitions for subscriptions list collapse

css/style.css

@@ -200,6 +200,10 @@ body {
     text-transform: uppercase;
 }
 
+.nav-section-title i {
+    transition: transform 0.3s ease;
+}
+
 .nav-btn {
     display: flex;
     align-items: center;
@@ -231,6 +235,16 @@ body {
 
 .subscriptions-list {
     padding: 0 12px;
+    max-height: 500px;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 1;
+}
+
+.subscriptions-list.collapsed {
+    max-height: 0;
+    opacity: 0;
+    padding: 0 12px;
 }
 
 .subscription-item {

js/script.js

@@ -778,12 +778,12 @@ function bindEvents() { // Bind events to the DOM elements
         const subscriptionsList = document.querySelector('.subscriptions-list');
         const chevron = subscriptionTitle.querySelector('i');
         
-        if (subscriptionsList.style.display === 'none') {
+        subscriptionsList.classList.toggle('collapsed');
-            subscriptionsList.style.display = 'block';
+        
-            chevron.style.transform = 'rotate(0deg)';
+        if (subscriptionsList.classList.contains('collapsed')) {
-        } else {
-            subscriptionsList.style.display = 'none';
             chevron.style.transform = 'rotate(-90deg)';
+        } else {
+            chevron.style.transform = 'rotate(0deg)';
         }
     });
 }