improved styling and so many things ahhhh

static/css/album/album.css

@@ -4,26 +4,26 @@
     padding: 0;
     box-sizing: border-box;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
+  }
-
+  
-body {
+  body {
-    background-color: #121212;
+    background: linear-gradient(135deg, #121212, #1e1e1e);
     color: #ffffff;
     min-height: 100vh;
     line-height: 1.4;
-}
+  }
-
+  
-/* Main App Container */
+  /* Main App Container */
-#app {
+  #app {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
     position: relative;
     z-index: 1;
-}
+  }
-
+  
-/* Album Header */
+  /* Album Header */
-#album-header {
+  #album-header {
     display: flex;
     gap: 20px;
     margin-bottom: 2rem;
@@ -31,41 +31,51 @@ body {
     padding-bottom: 1.5rem;
     border-bottom: 1px solid #2a2a2a;
     flex-wrap: wrap;
-}
+    transition: all 0.3s ease;
-
+  }
-#album-image {
+  
+  #album-image {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border-radius: 8px;
     flex-shrink: 0;
-}
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-
+    transition: transform 0.3s ease;
-#album-info {
+  }
+  #album-image:hover {
+    transform: scale(1.02);
+  }
+  
+  #album-info {
     flex: 1;
     min-width: 0;
-}
+  }
-
+  
-#album-name {
+  #album-name {
-    font-size: 2rem;
+    font-size: 2.5rem;
     margin-bottom: 0.5rem;
-}
+    background: linear-gradient(90deg, #1db954, #17a44b);
-
+    -webkit-background-clip: text;
-#album-artist,
+    -webkit-text-fill-color: transparent;
-#album-stats,
+  }
-#album-copyright {
+  
-    font-size: 1rem;
+  #album-artist,
+  #album-stats {
+    font-size: 1.1rem;
     color: #b3b3b3;
     margin-bottom: 0.5rem;
-}
+  }
-
+  
-#album-copyright {
+  #album-copyright {
     font-size: 0.9rem;
+    color: #b3b3b3;
     opacity: 0.8;
-}
+    margin-bottom: 0.5rem;
-
+  }
-/* Playlist Header */
+  
-#playlist-header {
+  /* Playlist Header */
+  #playlist-header {
     display: flex;
     gap: 20px;
     margin-bottom: 2rem;
@@ -73,55 +83,64 @@ body {
     padding-bottom: 1.5rem;
     border-bottom: 1px solid #2a2a2a;
     flex-wrap: wrap;
-}
+    transition: all 0.3s ease;
-
+  }
-#playlist-image {
+  
+  #playlist-image {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border-radius: 8px;
     flex-shrink: 0;
-}
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-
+    transition: transform 0.3s ease;
-#playlist-info {
+  }
+  #playlist-image:hover {
+    transform: scale(1.02);
+  }
+  
+  #playlist-info {
     flex: 1;
     min-width: 0;
-}
+  }
-
+  
-#playlist-name {
+  #playlist-name {
-    font-size: 2rem;
+    font-size: 2.5rem;
     margin-bottom: 0.5rem;
-}
+    background: linear-gradient(90deg, #1db954, #17a44b);
-
+    -webkit-background-clip: text;
-#playlist-owner,
+    -webkit-text-fill-color: transparent;
-#playlist-stats,
+  }
-#playlist-description {
+  
-    font-size: 1rem;
+  #playlist-owner,
+  #playlist-stats,
+  #playlist-description {
+    font-size: 1.1rem;
     color: #b3b3b3;
     margin-bottom: 0.5rem;
-}
+  }
-
+  
-/* Tracks Container */
+  /* Tracks Container */
-#tracks-container {
+  #tracks-container {
     margin-top: 2rem;
-}
+  }
-
+  
-#tracks-container h2 {
+  #tracks-container h2 {
-    font-size: 1.5rem;
+    font-size: 1.75rem;
     margin-bottom: 1rem;
     border-bottom: 1px solid #2a2a2a;
     padding-bottom: 0.5rem;
-}
+  }
-
+  
-/* Tracks List */
+  /* Tracks List */
-#tracks-list {
+  #tracks-list {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-}
+  }
-
+  
-/* Individual Track Styling */
+  /* Individual Track Styling */
-.track {
+  .track {
     display: flex;
     align-items: center;
     padding: 1rem;
@@ -129,41 +148,41 @@ body {
     border-radius: 8px;
     transition: background 0.3s ease;
     flex-wrap: wrap;
-}
+  }
-
+  
-.track:hover {
+  .track:hover {
     background: #2a2a2a;
-}
+  }
-
+  
-.track-number {
+  .track-number {
     width: 30px;
     font-size: 1rem;
     font-weight: 500;
     text-align: center;
     margin-right: 1rem;
     flex-shrink: 0;
-}
+  }
-
+  
-.track-info {
+  .track-info {
     flex: 1;
     display: flex;
     flex-direction: column;
     min-width: 0;
     align-items: flex-start;
-}
+  }
-
+  
-.track-name {
+  .track-name {
     font-size: 1rem;
     font-weight: bold;
     word-wrap: break-word;
-}
+  }
-
+  
-.track-artist {
+  .track-artist {
     font-size: 0.9rem;
     color: #b3b3b3;
-}
+  }
-
+  
-.track-album {
+  .track-album {
     max-width: 200px;
     font-size: 0.9rem;
     color: #b3b3b3;
@@ -172,105 +191,105 @@ body {
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: right;
-}
+  }
-
+  
-.track-duration {
+  .track-duration {
     width: 60px;
     text-align: right;
     font-size: 0.9rem;
     color: #b3b3b3;
     margin-left: 1rem;
     flex-shrink: 0;
-}
+  }
-
+  
-/* Loading and Error States */
+  /* Loading and Error States */
-.loading,
+  .loading,
-.error {
+  .error {
     width: 100%;
     text-align: center;
     font-size: 1rem;
     padding: 1rem;
-}
+  }
-
+  
-.error {
+  .error {
     color: #c0392b;
-}
+  }
-
+  
-/* Utility Classes */
+  /* Utility Classes */
-.hidden {
+  .hidden {
     display: none !important;
-}
+  }
-
+  
-/* Unified Download Button Base Style */
+  /* Unified Download Button Base Style */
-.download-btn {
+  .download-btn {
     background-color: #1db954;
     color: #fff;
     border: none;
     border-radius: 4px;
-    padding: 0.5rem 1rem;
+    padding: 0.6rem 1.2rem;
-    font-size: 0.95rem;
+    font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.2s ease;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin: 0.5rem;
-}
+  }
-
+  
-.download-btn:hover {
+  .download-btn:hover {
     background-color: #17a44b;
-}
+  }
-
+  
-.download-btn:active {
+  .download-btn:active {
     transform: scale(0.98);
-}
+  }
-
+  
-/* Circular Variant for Compact Areas (e.g., in a queue list) */
+  /* Circular Variant for Compact Areas (e.g., in a queue list) */
-.download-btn--circle {
+  .download-btn--circle {
     width: 32px;
     height: 32px;
     padding: 0;
     border-radius: 50%;
     font-size: 0;
-}
+  }
-
+  
-.download-btn--circle::before {
+  .download-btn--circle::before {
     content: "↓";
     font-size: 16px;
     color: #fff;
     display: inline-block;
-}
+  }
-
+  
-/* Icon next to text */
+  /* Icon next to text */
-.download-btn .btn-icon {
+  .download-btn .btn-icon {
     margin-right: 0.5rem;
     display: inline-flex;
     align-items: center;
-}
+  }
-
+  
-/* Back Button Styling */
+  /* Back Button Styling */
-.back-btn {
+  .back-btn {
     background-color: #333;
     color: #fff;
     border: none;
     border-radius: 4px;
-    padding: 0.5rem 1rem;
+    padding: 0.6rem 1.2rem;
-    font-size: 0.95rem;
+    font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.2s ease;
     margin-right: 1rem;
-}
+  }
-
+  
-.back-btn:hover {
+  .back-btn:hover {
     background-color: #444;
-}
+  }
-
+  
-.back-btn:active {
+  .back-btn:active {
     transform: scale(0.98);
-}
+  }
-
+  
-/* Download Queue Toggle Button */
+  /* Download Queue Toggle Button */
-.queue-toggle {
+  .queue-toggle {
     position: fixed;
     bottom: 20px;
     right: 20px;
@@ -281,110 +300,106 @@ body {
     width: 56px;
     height: 56px;
     cursor: pointer;
-    font-size: 0.9rem;
+    font-size: 1rem;
     font-weight: bold;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
     transition: background-color 0.3s ease, transform 0.2s ease;
     z-index: 1002;
-}
+  }
-
+  
-.queue-toggle:hover {
+  .queue-toggle:hover {
     background: #1ed760;
     transform: scale(1.05);
-}
+  }
-
+  
-.queue-toggle:active {
+  .queue-toggle:active {
     transform: scale(1);
-}
+  }
-
+  
-/* Responsive Styles */
+  /* Responsive Styles */
-
+  
-/* Medium Devices (Tablets) */
+  /* Medium Devices (Tablets) */
-@media (max-width: 768px) {
+  @media (max-width: 768px) {
-    #playlist-header {
+    #album-header, #playlist-header {
-        flex-direction: column;
+      flex-direction: column;
-        align-items: flex-start;
+      align-items: center;
+      text-align: center;
     }
-    
+  
-    #playlist-image {
+    #album-image, #playlist-image {
-        width: 100%;
+      width: 180px;
-        height: auto;
+      height: 180px;
-        margin-bottom: 1rem;
+      margin-bottom: 1rem;
     }
-    
+  
+    #album-name, #playlist-name {
+      font-size: 2rem;
+    }
+  
+    #album-artist,
+    #album-stats,
+    #playlist-owner,
+    #playlist-stats,
+    #playlist-description {
+      font-size: 1rem;
+    }
+  
     .track {
-        flex-direction: column;
+      flex-direction: column;
-        align-items: flex-start;
+      align-items: flex-start;
     }
     
     .track-album,
     .track-duration {
-        margin-left: 0;
+      margin-left: 0;
-        margin-top: 0.5rem;
+      margin-top: 0.5rem;
-        width: 100%;
+      width: 100%;
-        text-align: left;
+      text-align: left;
     }
-}
+  }
-
+  
-/* Small Devices (Mobile Phones) */
+  /* Small Devices (Mobile Phones) */
-@media (max-width: 480px) {
+  @media (max-width: 480px) {
     #app {
-        padding: 10px;
+      padding: 10px;
     }
     
-    #playlist-name {
+    #album-name, #playlist-name {
-        font-size: 1.5rem;
+      font-size: 1.75rem;
-    }
-    
-    .track {
-        padding: 0.8rem;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-    }
-    
-    .track-number {
-        font-size: 0.9rem;
-        margin-right: 0;
-        margin-bottom: 0.5rem;
-    }
-    
-    .track-info {
-        align-items: center;
-    }
-    
-    .track-album,
-    .track-duration {
-        margin-left: 0;
-        margin-top: 0.5rem;
-        width: 100%;
-        text-align: center;
-    }
-    
-    /* Mobile-specific styles for Album Info */
-    #album-header {
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-    }
-    
-    #album-image {
-        width: 150px;
-        height: 150px;
-        margin-bottom: 1rem;
-    }
-    
-    #album-info {
-        width: 100%;
-    }
-    
-    #album-name {
-        font-size: 1.5rem;
     }
     
     #album-artist,
     #album-stats,
-    #album-copyright {
+    #album-copyright,
-        font-size: 0.9rem;
+    #playlist-owner,
+    #playlist-stats,
+    #playlist-description {
+      font-size: 0.9rem;
     }
-}
+    
+    .track {
+      padding: 0.8rem;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+    
+    .track-number {
+      font-size: 0.9rem;
+      margin-right: 0;
+      margin-bottom: 0.5rem;
+    }
+    
+    .track-info {
+      align-items: center;
+    }
+    
+    .track-album,
+    .track-duration {
+      margin-left: 0;
+      margin-top: 0.5rem;
+      width: 100%;
+      text-align: center;
+    }
+  }
+  

static/css/main/base.css

@@ -1,34 +0,0 @@
-/* GENERAL STYLING & UTILITIES */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-body {
-    background-color: #121212;
-    color: #ffffff;
-    min-height: 100vh;
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-    position: relative;
-    z-index: 1;
-}
-
-/* LOADING & ERROR STATES */
-.loading,
-.error {
-    width: 100%;
-    text-align: center;
-    font-size: 1rem;
-    padding: 1rem;
-}
-
-.error {
-    color: #c0392b;
-}

static/css/main/main.css

@@ -0,0 +1,299 @@
+/* GENERAL STYLING & UTILITIES */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+  
+  body {
+    /* Use a subtle dark gradient for a modern feel */
+    background: linear-gradient(135deg, #121212, #1e1e1e);
+    color: #ffffff;
+    min-height: 100vh;
+  }
+  
+  /* Main container for page content */
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    position: relative;
+    z-index: 1;
+  }
+  
+  /* LOADING & ERROR STATES */
+  .loading,
+  .error {
+    width: 100%;
+    text-align: center;
+    font-size: 1rem;
+    padding: 1rem;
+  }
+  
+  .error {
+    color: #c0392b;
+  }
+  
+  /* SEARCH HEADER COMPONENT */
+  .search-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 30px;
+    position: sticky;
+    top: 0;
+    background: rgba(18, 18, 18, 1);
+    backdrop-filter: blur(10px);
+    padding: 20px 0;
+    z-index: 100;
+    border-bottom: 1px solid #2a2a2a;
+  }
+  
+  
+  .search-input {
+    flex: 1;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 25px;
+    background: #2a2a2a;
+    color: #ffffff;
+    font-size: 16px;
+    outline: none;
+    transition: background-color 0.3s ease;
+  }
+  
+  .search-input:focus {
+    background: #333333;
+  }
+  
+  .search-type {
+    padding: 12px 15px;
+    background: #2a2a2a;
+    border: none;
+    border-radius: 25px;
+    color: #ffffff;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  .search-type:hover {
+    background: #3a3a3a;
+  }
+  
+  .search-button {
+    padding: 12px 30px;
+    background-color: #1db954;
+    border: none;
+    border-radius: 25px;
+    color: #ffffff;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+  }
+  
+  .search-button:hover {
+    background-color: #1ed760;
+    transform: translateY(-2px);
+  }
+  
+  /* RESULTS GRID COMPONENT */
+  .results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+  }
+  
+  /* Each result card gets a modern look with subtle borders, shadows, and transitions */
+  .result-card {
+    background: #181818;
+    border: 1px solid #2a2a2a;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    max-width: 100%;
+  }
+  
+  .result-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+  }
+  
+  /* Album/Art image wrapper maintains aspect ratio */
+  .album-art-wrapper {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+    margin-bottom: 15px;
+  }
+  
+  .album-art-wrapper::before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+  }
+  
+  .album-art {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+  
+  .album-art:hover {
+    transform: scale(1.02);
+  }
+  
+  /* Result text details */
+  .track-title {
+    padding: 0.5rem 1rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #ffffff;
+    margin-bottom: 0.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: linear-gradient(90deg, #1db954, #17a44b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  .track-artist {
+    padding: 0 1rem;
+    font-size: 0.95rem;
+    color: #b3b3b3;
+    margin-bottom: 0.5rem;
+  }
+  
+  /* Track details (e.g., duration, extra info) */
+  .track-details {
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+    color: #ccc;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #2a2a2a;
+  }
+  
+  .duration {
+    font-style: italic;
+    color: #999;
+  }
+  
+  /* Centered Download Button styling */
+  .download-btn {
+    margin: 0.75rem 1rem 1rem;
+    padding: 0.5rem 1rem;
+    background-color: #1db954;
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+    display: block;
+    text-align: center;
+    width: calc(100% - 2rem);
+  }
+  
+  .download-btn:hover {
+    background-color: #17a44b;
+    transform: scale(1.02);
+  }
+  
+  /* ARTIST DOWNLOAD OPTIONS */
+  .artist-download-buttons {
+    border-top: 1px solid #2a2a2a;
+    padding: 0.5rem 1rem;
+  }
+  
+  .options-toggle {
+    width: 100%;
+    background: none;
+    border: none;
+    color: #b3b3b3;
+    padding: 8px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    transition: color 0.2s ease;
+  }
+  
+  .options-toggle:hover {
+    color: #ffffff;
+  }
+  
+  .download-options-container {
+    margin-top: 0.5rem;
+  }
+  
+  .secondary-options {
+    display: none;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
+  
+  .secondary-options.expanded {
+    display: flex;
+  }
+  
+  .option-btn {
+    flex: 1;
+    background-color: #2a2a2a;
+    color: #ffffff;
+    padding: 0.4rem 0.6rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+  }
+  
+  .option-btn:hover {
+    background-color: #3a3a3a;
+    transform: translateY(-1px);
+  }
+  
+  /* MOBILE RESPONSIVENESS */
+  @media (max-width: 600px) {
+    .search-header {
+      flex-wrap: wrap;
+      justify-content: center;
+      padding: 10px 0;
+    }
+    
+    .search-input,
+    .search-type,
+    .search-button {
+      flex: 1 1 100%;
+      margin-bottom: 10px;
+    }
+    
+    .search-type,
+    .search-button {
+      padding: 10px;
+      font-size: 15px;
+    }
+    
+    .results-grid {
+      justify-content: center;
+    }
+    
+    .result-card {
+      width: 90%;
+      margin: 0 auto;
+    }
+  }
+  

static/css/main/results-grid.css

@@ -1,160 +0,0 @@
-/* RESULTS GRID COMPONENT */
-.results-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 20px;
-}
-
-.result-card {
-    background-color: #181818;
-    border: 1px solid #2a2a2a;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    max-width: 100%;
-}
-
-.result-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
-}
-
-.album-art-wrapper {
-    position: relative;
-    width: 100%;
-    overflow: hidden;
-    border-radius: 4px;
-    margin-bottom: 15px;
-}
-
-.album-art-wrapper::before {
-    content: "";
-    display: block;
-    padding-top: 100%;
-}
-
-.album-art {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.track-title {
-    padding: 0.5rem 1rem;
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 0.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.track-artist {
-    padding: 0 1rem;
-    font-size: 0.95rem;
-    color: #b3b3b3;
-    margin-bottom: 0.5rem;
-}
-
-.track-details {
-    padding: 0.5rem 1rem;
-    font-size: 0.85rem;
-    color: #ccc;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-top: 1px solid #2a2a2a;
-}
-
-.duration {
-    font-style: italic;
-    color: #999;
-}
-
-.download-btn {
-    margin: 0.75rem 1rem 1rem;
-    padding: 0.5rem 1rem;
-    background-color: #1db954;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    font-size: 0.95rem;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: calc(100% - 2rem);
-}
-
-.download-btn:hover {
-    background-color: #17a44b;
-}
-
-/* Artist Download Options */
-.artist-download-buttons {
-    border-top: 1px solid #2a2a2a;
-    padding: 0.5rem 1rem;
-}
-
-.options-toggle {
-    width: 100%;
-    background: none;
-    border: none;
-    color: #b3b3b3;
-    padding: 8px 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-}
-
-.download-options-container {
-    margin-top: 0.5rem;
-}
-
-.secondary-options {
-    display: none;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-}
-
-.secondary-options.expanded {
-    display: flex;
-}
-
-.option-btn {
-    flex: 1;
-    background-color: #2a2a2a;
-    color: #fff;
-    padding: 0.4rem 0.6rem;
-    border: none;
-    border-radius: 4px;
-    font-size: 0.85rem;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-}
-
-.option-btn:hover {
-    background-color: #3a3a3a;
-}
-
-/* Mobile Responsiveness */
-@media (max-width: 600px) {
-    .results-grid {
-        justify-content: center;
-    }
-    .result-card {
-        width: 90%;
-        margin: 0 auto;
-    }
-}

static/css/main/search-header.css

@@ -1,68 +0,0 @@
-/* SEARCH HEADER COMPONENT */
-.search-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 30px;
-    position: sticky;
-    top: 0;
-    background-color: #121212;
-    padding: 20px 0;
-    z-index: 100;
-}
-
-.search-input {
-    flex: 1;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 25px;
-    background: #2a2a2a;
-    color: white;
-    font-size: 16px;
-}
-
-.search-type {
-    padding: 12px 15px;
-    background: #2a2a2a;
-    border: none;
-    border-radius: 25px;
-    color: white;
-    cursor: pointer;
-}
-
-.search-button {
-    padding: 12px 30px;
-    background-color: #1DB954;
-    border: none;
-    border-radius: 25px;
-    color: white;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-.search-button:hover {
-    background-color: #1ed760;
-}
-
-/* Mobile Responsiveness */
-@media (max-width: 600px) {
-    .search-header {
-        flex-wrap: wrap;
-        justify-content: center;
-        padding: 10px 0;
-    }
-    
-    .search-input,
-    .search-type,
-    .search-button {
-        flex: 1 1 100%;
-        margin-bottom: 10px;
-    }
-    
-    .search-type,
-    .search-button {
-        padding: 10px;
-        font-size: 15px;
-    }
-}

static/css/playlist/playlist.css

@@ -1,325 +1,333 @@
 /* Base Styles */
 * {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  }
+}
-  
+
-  body {
+body {
-    background-color: #121212;
+  background: linear-gradient(135deg, #121212, #1e1e1e);
-    color: #ffffff;
+  color: #ffffff;
-    min-height: 100vh;
+  min-height: 100vh;
-    line-height: 1.4;
+  line-height: 1.4;
-  }
+}
-  
+
-  /* Main App Container */
+/* Main App Container */
-  #app {
+#app {
-    max-width: 1200px;
+  max-width: 1200px;
-    margin: 0 auto;
+  margin: 0 auto;
-    padding: 20px;
+  padding: 20px;
-    position: relative;
+  position: relative;
-    z-index: 1;
+  z-index: 1;
-  }
+}
-  
+
-  /* Playlist Header */
+/* Playlist Header */
+#playlist-header {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 2rem;
+  align-items: center;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #2a2a2a;
+  flex-wrap: wrap;
+  transition: all 0.3s ease;
+}
+
+#playlist-image {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 8px;
+  flex-shrink: 0;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+  transition: transform 0.3s ease;
+}
+#playlist-image:hover {
+  transform: scale(1.02);
+}
+
+#playlist-info {
+  flex: 1;
+  min-width: 0;
+}
+
+#playlist-name {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+  background: linear-gradient(90deg, #1db954, #17a44b);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+#playlist-owner,
+#playlist-stats,
+#playlist-description {
+  font-size: 1.1rem;
+  color: #b3b3b3;
+  margin-bottom: 0.5rem;
+}
+
+/* Tracks Container */
+#tracks-container {
+  margin-top: 2rem;
+}
+
+#tracks-container h2 {
+  font-size: 1.75rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #2a2a2a;
+  padding-bottom: 0.5rem;
+}
+
+/* Tracks List */
+#tracks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Individual Track Styling */
+.track {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  background: #181818;
+  border-radius: 8px;
+  transition: background 0.3s ease;
+  flex-wrap: wrap;
+}
+
+.track:hover {
+  background: #2a2a2a;
+}
+
+.track-number {
+  width: 30px;
+  font-size: 1rem;
+  font-weight: 500;
+  text-align: center;
+  margin-right: 1rem;
+  flex-shrink: 0;
+}
+
+.track-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  align-items: flex-start;
+}
+
+.track-name {
+  font-size: 1rem;
+  font-weight: bold;
+  word-wrap: break-word;
+}
+
+.track-artist {
+  font-size: 0.9rem;
+  color: #b3b3b3;
+}
+
+/* When displaying track album info on the side */
+.track-album {
+  max-width: 200px;
+  font-size: 0.9rem;
+  color: #b3b3b3;
+  margin-left: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.track-duration {
+  width: 60px;
+  text-align: right;
+  font-size: 0.9rem;
+  color: #b3b3b3;
+  margin-left: 1rem;
+  flex-shrink: 0;
+}
+
+/* Loading and Error States */
+.loading,
+.error {
+  width: 100%;
+  text-align: center;
+  font-size: 1rem;
+  padding: 1rem;
+}
+
+.error {
+  color: #c0392b;
+}
+
+/* Utility Classes */
+.hidden {
+  display: none !important;
+}
+
+/* Unified Download Button Base Style */
+.download-btn {
+  background-color: #1db954;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.6rem 1.2rem;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.5rem;
+}
+
+.download-btn:hover {
+  background-color: #17a44b;
+}
+
+.download-btn:active {
+  transform: scale(0.98);
+}
+
+/* Circular Variant for Compact Areas (e.g., in a queue list) */
+.download-btn--circle {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 50%;
+  font-size: 0;
+}
+
+.download-btn--circle::before {
+  content: "↓";
+  font-size: 16px;
+  color: #fff;
+  display: inline-block;
+}
+
+/* Icon next to text */
+.download-btn .btn-icon {
+  margin-right: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Back Button Styling */
+.back-btn {
+  background-color: #333;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.6rem 1.2rem;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+  margin-right: 1rem;
+}
+
+.back-btn:hover {
+  background-color: #444;
+}
+
+.back-btn:active {
+  transform: scale(0.98);
+}
+
+/* Download Queue Toggle Button */
+.queue-toggle {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: #1db954;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  z-index: 1002;
+}
+
+.queue-toggle:hover {
+  background: #1ed760;
+  transform: scale(1.05);
+}
+
+.queue-toggle:active {
+  transform: scale(1);
+}
+
+/* Responsive Styles */
+
+/* Medium Devices (Tablets) */
+@media (max-width: 768px) {
   #playlist-header {
-    display: flex;
+    flex-direction: column;
-    gap: 20px;
-    margin-bottom: 2rem;
     align-items: center;
-    padding-bottom: 1.5rem;
+    text-align: center;
-    border-bottom: 1px solid #2a2a2a;
-    flex-wrap: wrap; /* Allow wrapping on narrow screens */
   }
   
   #playlist-image {
-    width: 200px;
+    width: 180px;
-    height: 200px;
+    height: 180px;
-    object-fit: cover;
+    margin-bottom: 1rem;
-    border-radius: 8px;
-    flex-shrink: 0;
   }
   
-  #playlist-info {
+  .track {
-    flex: 1;
+    flex-direction: column;
-    min-width: 0;
+    align-items: flex-start;
+  }
+  
+  .track-album,
+  .track-duration {
+    margin-left: 0;
+    margin-top: 0.5rem;
+    width: 100%;
+    text-align: left;
+  }
+}
+
+/* Small Devices (Mobile Phones) */
+@media (max-width: 480px) {
+  #app {
+    padding: 10px;
   }
   
   #playlist-name {
-    font-size: 2rem;
+    font-size: 1.75rem;
-    margin-bottom: 0.5rem;
   }
   
-  #playlist-owner,
+  /* Adjust track layout to vertical & centered */
-  #playlist-stats,
-  #playlist-description {
-    font-size: 1rem;
-    color: #b3b3b3;
-    margin-bottom: 0.5rem;
-  }
-  
-  /* Tracks Container */
-  #tracks-container {
-    margin-top: 2rem;
-  }
-  
-  #tracks-container h2 {
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #2a2a2a;
-    padding-bottom: 0.5rem;
-  }
-  
-  /* Tracks List */
-  #tracks-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  /* Individual Track Styling */
   .track {
-    display: flex;
+    padding: 0.8rem;
+    flex-direction: column;
     align-items: center;
-    padding: 1rem;
+    text-align: center;
-    background: #181818;
-    border-radius: 8px;
-    transition: background 0.3s ease;
-    flex-wrap: wrap;
-  }
-  
-  .track:hover {
-    background: #2a2a2a;
   }
   
   .track-number {
-    width: 30px;
+    font-size: 0.9rem;
-    font-size: 1rem;
+    margin-right: 0;
-    font-weight: 500;
+    margin-bottom: 0.5rem;
-    text-align: center;
-    margin-right: 1rem;
-    flex-shrink: 0;
   }
   
   .track-info {
-    flex: 1;
+    align-items: center;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    align-items: flex-start; /* default left alignment */
-  }
-  
-  .track-name {
-    font-size: 1rem;
-    font-weight: bold;
-    word-wrap: break-word;
-  }
-  
-  .track-artist {
-    font-size: 0.9rem;
-    color: #b3b3b3;
-  }
-  
-  .track-album {
-    max-width: 200px;
-    font-size: 0.9rem;
-    color: #b3b3b3;
-    margin-left: 1rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: right;
   }
   
+  .track-album,
   .track-duration {
-    width: 60px;
+    margin-left: 0;
-    text-align: right;
+    margin-top: 0.5rem;
-    font-size: 0.9rem;
-    color: #b3b3b3;
-    margin-left: 1rem;
-    flex-shrink: 0;
-  }
-  
-  /* Loading and Error States */
-  .loading,
-  .error {
     width: 100%;
     text-align: center;
-    font-size: 1rem;
-    padding: 1rem;
   }
-  
+}
-  .error {
-    color: #c0392b;
-  }
-  
-  /* Utility Classes */
-  .hidden {
-    display: none !important;
-  }
-  
-  /* Unified Download Button Base Style */
-  .download-btn {
-    background-color: #1db954;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    padding: 0.5rem 1rem;
-    font-size: 0.95rem;
-    cursor: pointer;
-    transition: background-color 0.2s ease, transform 0.2s ease;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0.5rem;
-  }
-  
-  .download-btn:hover {
-    background-color: #17a44b;
-  }
-  
-  .download-btn:active {
-    transform: scale(0.98);
-  }
-  
-  /* Circular Variant for Compact Areas (e.g., in a queue list) */
-  .download-btn--circle {
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    border-radius: 50%;
-    font-size: 0;
-  }
-  
-  .download-btn--circle::before {
-    content: "↓";
-    font-size: 16px;
-    color: #fff;
-    display: inline-block;
-  }
-  
-  /* Icon next to text */
-  .download-btn .btn-icon {
-    margin-right: 0.5rem;
-    display: inline-flex;
-    align-items: center;
-  }
-  
-  /* Back Button Styling */
-  .back-btn {
-    background-color: #333;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    padding: 0.5rem 1rem;
-    font-size: 0.95rem;
-    cursor: pointer;
-    transition: background-color 0.2s ease, transform 0.2s ease;
-    margin-right: 1rem;
-  }
-  
-  .back-btn:hover {
-    background-color: #444;
-  }
-  
-  .back-btn:active {
-    transform: scale(0.98);
-  }
-  
-  /* Download Queue Toggle Button */
-  .queue-toggle {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background: #1db954;
-    color: #fff;
-    border: none;
-    border-radius: 50%;
-    width: 56px;
-    height: 56px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    font-weight: bold;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    transition: background-color 0.3s ease, transform 0.2s ease;
-    z-index: 1002;
-  }
-  
-  .queue-toggle:hover {
-    background: #1ed760;
-    transform: scale(1.05);
-  }
-  
-  .queue-toggle:active {
-    transform: scale(1);
-  }
-  
-  /* Responsive Styles */
-  
-  /* Medium Devices (Tablets) */
-  @media (max-width: 768px) {
-    #playlist-header {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-    
-    #playlist-image {
-      width: 100%;
-      height: auto;
-      margin-bottom: 1rem;
-    }
-    
-    .track {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-    
-    .track-album,
-    .track-duration {
-      margin-left: 0;
-      margin-top: 0.5rem;
-      width: 100%;
-      text-align: left;
-    }
-  }
-  
-  /* Small Devices (Mobile Phones) */
-  @media (max-width: 480px) {
-    #app {
-      padding: 10px;
-    }
-    
-    #playlist-name {
-      font-size: 1.5rem;
-    }
-    
-    /* Adjust track layout to vertical & centered */
-    .track {
-      padding: 0.8rem;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-    }
-    
-    .track-number {
-      font-size: 0.9rem;
-      margin-right: 0;
-      margin-bottom: 0.5rem;
-    }
-    
-    .track-info {
-      align-items: center;
-    }
-    
-    /* Center the album and duration info */
-    .track-album,
-    .track-duration {
-      margin-left: 0;
-      margin-top: 0.5rem;
-      width: 100%;
-      text-align: center;
-    }
-    
-  }
-  

static/css/track/track.css

@@ -7,12 +7,13 @@
   }
   
   body {
-    background-color: #121212;
+    background: linear-gradient(135deg, #121212, #1e1e1e);
     color: #ffffff;
     min-height: 100vh;
     line-height: 1.4;
   }
   
+  /* App Container */
   #app {
     max-width: 1200px;
     margin: 0 auto;
@@ -24,37 +25,48 @@
   /* Track Header */
   #track-header {
     display: flex;
+    align-items: center;
     gap: 20px;
     margin-bottom: 2rem;
-    align-items: center;
     padding-bottom: 1.5rem;
     border-bottom: 1px solid #2a2a2a;
     flex-wrap: wrap;
+    transition: all 0.3s ease;
   }
   
+  /* Album Image with a subtle shadow and rounded corners */
   #track-album-image {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border-radius: 8px;
     flex-shrink: 0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s ease;
+  }
+  #track-album-image:hover {
+    transform: scale(1.02);
   }
   
+  /* Track Info Styles */
   #track-info {
     flex: 1;
     min-width: 0;
   }
   
   #track-name {
-    font-size: 2rem;
+    font-size: 2.5rem;
     margin-bottom: 0.5rem;
+    background: linear-gradient(90deg, #1db954, #17a44b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
   
   #track-artist,
   #track-album,
   #track-duration,
   #track-explicit {
-    font-size: 1rem;
+    font-size: 1.1rem;
     color: #b3b3b3;
     margin-bottom: 0.5rem;
   }
@@ -78,8 +90,8 @@
     color: #fff;
     border: none;
     border-radius: 4px;
-    padding: 0.5rem 1rem;
+    padding: 0.6rem 1.2rem;
-    font-size: 0.95rem;
+    font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.2s ease;
     margin-right: 1rem;
@@ -93,22 +105,22 @@
     transform: scale(0.98);
   }
   
-  /* Download Button Base Style (same as in the playlist project) */
+  /* Download Button */
   .download-btn {
     background-color: #1db954;
     color: #fff;
     border: none;
     border-radius: 4px;
-    padding: 0.5rem 1rem;
+    padding: 0.6rem 1.2rem;
-    font-size: 0.95rem;
+    font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.2s ease;
-    display: inline-flex;
+    display: block;       /* Changed from inline-flex to block */
-    align-items: center;
+    margin: 0.5rem auto;  /* Centers the button horizontally */
-    justify-content: center;
+    text-align: center;
-    margin: 0.5rem;
   }
   
+  
   .download-btn:hover {
     background-color: #17a44b;
   }
@@ -127,4 +139,61 @@
   /* Utility Classes */
   .hidden {
     display: none !important;
-  }
+  }
+  
+  /* Mobile Responsiveness */
+  @media (max-width: 768px) {
+    #app {
+      padding: 15px;
+    }
+  
+    #track-header {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  
+    #track-album-image {
+      width: 180px;
+      height: 180px;
+    }
+  
+    #track-name {
+      font-size: 2rem;
+    }
+  
+    #track-artist,
+    #track-album,
+    #track-duration,
+    #track-explicit {
+      font-size: 1rem;
+    }
+  
+    .back-btn,
+    .download-btn {
+      padding: 0.5rem 1rem;
+      font-size: 0.9rem;
+      margin: 0.5rem 0;
+      display: block;       /* Changed from inline-flex to block */
+      margin: 0.5rem auto;  /* Centers the button horizontally */
+    }
+  }
+  
+  @media (max-width: 480px) {
+    #track-album-image {
+      width: 150px;
+      height: 150px;
+    }
+  
+    #track-name {
+      font-size: 1.75rem;
+    }
+  
+    #track-artist,
+    #track-album,
+    #track-duration,
+    #track-explicit {
+      font-size: 0.9rem;
+    }
+  }
+  

static/js/album.js

@@ -1,26 +1,23 @@
-// Import the downloadQueue singleton from your working queue.js implementation.
 import { downloadQueue } from './queue.js';
 
 document.addEventListener('DOMContentLoaded', () => {
-  // Parse artist ID from the URL (expected route: /artist/{id})
   const pathSegments = window.location.pathname.split('/');
-  const artistId = pathSegments[pathSegments.indexOf('artist') + 1];
+  const albumId = pathSegments[pathSegments.indexOf('album') + 1];
 
-  if (!artistId) {
+  if (!albumId) {
-    showError('No artist ID provided.');
+    showError('No album ID provided.');
     return;
   }
 
-  // Fetch the artist info (which includes a list of albums)
+  fetch(`/api/album/info?id=${encodeURIComponent(albumId)}`)
-  fetch(`/api/artist/info?id=${encodeURIComponent(artistId)}`)
     .then(response => {
       if (!response.ok) throw new Error('Network response was not ok');
       return response.json();
     })
-    .then(data => renderArtist(data))
+    .then(data => renderAlbum(data))
     .catch(error => {
       console.error('Error:', error);
-      showError('Failed to load artist info.');
+      showError('Failed to load album.');
     });
 
   const queueIcon = document.getElementById('queueIcon');
@@ -31,225 +28,132 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 });
 
-/**
+function renderAlbum(album) {
- * Renders the artist header and groups the albums by type.
- *
- * The API response is expected to have the following structure:
- * {
- *   "href": "...",
- *   "limit": 50,
- *   "next": null,
- *   "offset": 0,
- *   "previous": null,
- *   "total": 5,
- *   "items": [ { album object }, { album object }, ... ]
- * }
- */
-function renderArtist(artistData) {
-  // Hide loading and error messages
   document.getElementById('loading').classList.add('hidden');
   document.getElementById('error').classList.add('hidden');
 
-  // Use the first album to extract artist details
+  // Album header info
-  const firstAlbum = artistData.items[0];
+  document.getElementById('album-name').textContent = album.name;
-  const artistName = firstAlbum?.artists[0]?.name || 'Unknown Artist';
+  document.getElementById('album-artist').textContent = 
-  const artistImage = firstAlbum?.images[0]?.url || 'placeholder.jpg';
+    `By ${album.artists.map(artist => artist.name).join(', ')}`;
-  document.getElementById('artist-name').textContent = artistName;
+  
-  document.getElementById('artist-stats').textContent = `${artistData.total} albums`;
+  const releaseYear = new Date(album.release_date).getFullYear();
-  document.getElementById('artist-image').src = artistImage;
+  document.getElementById('album-stats').textContent =
+    `${releaseYear} • ${album.total_tracks} songs • ${album.label}`;
+  
+  document.getElementById('album-copyright').textContent =
+    album.copyrights.map(c => c.text).join(' • ');
 
-  // --- Add Back Button ---
+  const image = album.images[0]?.url || 'placeholder.jpg';
+  document.getElementById('album-image').src = image;
+
+  // Back Button
   let backButton = document.getElementById('backButton');
   if (!backButton) {
     backButton = document.createElement('button');
     backButton.id = 'backButton';
     backButton.textContent = 'Back';
     backButton.className = 'back-btn';
-    // Insert the back button at the beginning of the header container.
+    const headerContainer = document.getElementById('album-header');
-    const headerContainer = document.getElementById('artist-header');
     headerContainer.insertBefore(backButton, headerContainer.firstChild);
   }
   backButton.addEventListener('click', () => {
-    // Navigate to the site's base URL.
     window.location.href = window.location.origin;
   });
 
-  // --- Add "Download Whole Artist" Button ---
+  // Download Album Button
-  let downloadArtistBtn = document.getElementById('downloadArtistBtn');
+  let downloadAlbumBtn = document.getElementById('downloadAlbumBtn');
-  if (!downloadArtistBtn) {
+  if (!downloadAlbumBtn) {
-    downloadArtistBtn = document.createElement('button');
+    downloadAlbumBtn = document.createElement('button');
-    downloadArtistBtn.id = 'downloadArtistBtn';
+    downloadAlbumBtn.id = 'downloadAlbumBtn';
-    downloadArtistBtn.textContent = 'Download Whole Artist';
+    downloadAlbumBtn.textContent = 'Download Full Album';
-    downloadArtistBtn.className = 'download-btn download-btn--main';
+    downloadAlbumBtn.className = 'download-btn download-btn--main';
-    // Insert the button into the header container.
+    document.getElementById('album-header').appendChild(downloadAlbumBtn);
-    const headerContainer = document.getElementById('artist-header');
-    headerContainer.appendChild(downloadArtistBtn);
   }
-  downloadArtistBtn.addEventListener('click', () => {
+  
-    // Remove individual album download buttons (but leave the whole artist button).
+  downloadAlbumBtn.addEventListener('click', () => {
     document.querySelectorAll('.download-btn').forEach(btn => {
-      if (btn.id !== 'downloadArtistBtn') {
+      if (btn.id !== 'downloadAlbumBtn') btn.remove();
-        btn.remove();
-      }
     });
 
-    // Disable the whole artist button to prevent repeated clicks.
+    downloadAlbumBtn.disabled = true;
-    downloadArtistBtn.disabled = true;
+    downloadAlbumBtn.textContent = 'Queueing...';
-    downloadArtistBtn.textContent = 'Queueing...';
 
-    // Initiate the artist download.
+    downloadWholeAlbum(album).then(() => {
-    downloadWholeArtist(artistData).then(() => {
+      downloadAlbumBtn.textContent = 'Queued!';
-      downloadArtistBtn.textContent = 'Queued!';
     }).catch(err => {
-      showError('Failed to queue artist download: ' + err.message);
+      showError('Failed to queue album download: ' + err.message);
-      downloadArtistBtn.disabled = false;
+      downloadAlbumBtn.disabled = false;
     });
   });
 
-  // Group albums by album type.
+  // Render tracks
-  const albumGroups = {};
+  const tracksList = document.getElementById('tracks-list');
-  artistData.items.forEach(album => {
+  tracksList.innerHTML = '';
-    // Normalize album type to lower-case for grouping.
-    const type = album.album_type.toLowerCase();
-    if (!albumGroups[type]) {
-      albumGroups[type] = [];
-    }
-    albumGroups[type].push(album);
-  });
 
-  // Render groups into the #album-groups container.
+  album.tracks.items.forEach((track, index) => {
-  const groupsContainer = document.getElementById('album-groups');
+    const trackElement = document.createElement('div');
-  groupsContainer.innerHTML = ''; // clear any previous content
+    trackElement.className = 'track';
-
+    trackElement.innerHTML = `
-  // For each album type, render a section header, a "Download All" button, and the album list.
+      <div class="track-number">${index + 1}</div>
-  for (const [groupType, albums] of Object.entries(albumGroups)) {
+      <div class="track-info">
-    const groupSection = document.createElement('section');
+        <div class="track-name">${track.name}</div>
-    groupSection.className = 'album-group';
+        <div class="track-artist">${track.artists.map(a => a.name).join(', ')}</div>
-
+      </div>
-    // Header for the album group with a download-all button.
+      <div class="track-duration">${msToTime(track.duration_ms)}</div>
-    const header = document.createElement('div');
+      <button class="download-btn download-btn--circle" 
-    header.className = 'album-group-header';
+              data-url="${track.external_urls.spotify}" 
-    header.innerHTML = `
+              data-type="track"
-      <h3>${capitalize(groupType)}s</h3>
+              data-name="${track.name}">
-      <button class="download-btn download-btn--main group-download-btn" 
+        Download
-              data-album-type="${groupType}" 
-              data-artist-url="${firstAlbum.artists[0].external_urls.spotify}">
-        Download All ${capitalize(groupType)}s
       </button>
     `;
-    groupSection.appendChild(header);
+    tracksList.appendChild(trackElement);
+  });
 
-    // Container for the individual albums in this group.
+  document.getElementById('album-header').classList.remove('hidden');
-    const albumsContainer = document.createElement('div');
+  document.getElementById('tracks-container').classList.remove('hidden');
-    albumsContainer.className = 'albums-list';
-    albums.forEach((album, index) => {
-      const albumElement = document.createElement('div');
-      albumElement.className = 'track'; // reusing the same CSS classes as in the playlist view
-      albumElement.innerHTML = `
-        <div class="track-number">${index + 1}</div>
-        <img class="track-image" src="${album.images[1]?.url || album.images[0]?.url || 'placeholder.jpg'}" alt="Album cover" style="width: 64px; height: 64px; border-radius: 4px; margin-right: 1rem;">
-        <div class="track-info">
-          <div class="track-name">${album.name}</div>
-          <div class="track-artist">${album.album_type}</div>
-        </div>
-        <div class="track-album">${album.release_date}</div>
-        <div class="track-duration">${album.total_tracks} tracks</div>
-        <button class="download-btn download-btn--circle" 
-                data-url="${album.external_urls.spotify}" 
-                data-type="artist"
-                data-album-type="${album.album_type}"
-                data-name="${album.name}">
-          Download
-        </button>
-      `;
-      albumsContainer.appendChild(albumElement);
-    });
-    groupSection.appendChild(albumsContainer);
-    groupsContainer.appendChild(groupSection);
-  }
-
-  // Reveal header and albums container
-  document.getElementById('artist-header').classList.remove('hidden');
-  document.getElementById('albums-container').classList.remove('hidden');
-
-  // Attach event listeners for individual album download buttons.
   attachDownloadListeners();
-  // Attach event listeners for group download buttons.
-  attachGroupDownloadListeners();
 }
 
-/**
+async function downloadWholeAlbum(album) {
- * Displays an error message in the UI.
+  const url = album.external_urls.spotify;
- */
+  startDownload(url, 'album', { name: album.name });
+}
+
+function msToTime(duration) {
+  const minutes = Math.floor(duration / 60000);
+  const seconds = ((duration % 60000) / 1000).toFixed(0);
+  return `${minutes}:${seconds.padStart(2, '0')}`;
+}
+
 function showError(message) {
   const errorEl = document.getElementById('error');
   errorEl.textContent = message;
   errorEl.classList.remove('hidden');
 }
 
-/**
- * Attaches event listeners to all individual album download buttons.
- */
 function attachDownloadListeners() {
-  document.querySelectorAll('.download-btn').forEach((btn) => {
+    document.querySelectorAll('.download-btn').forEach((btn) => {
-    // Skip group and whole artist download buttons.
+      if (btn.id === 'downloadAlbumBtn') return;
-    if (btn.id === 'downloadArtistBtn' || btn.classList.contains('group-download-btn')) return;
+      btn.addEventListener('click', (e) => {
-    btn.addEventListener('click', (e) => {
+        e.stopPropagation();
-      e.stopPropagation();
+        const url = e.currentTarget.dataset.url;
-      const url = e.currentTarget.dataset.url;
+        const type = e.currentTarget.dataset.type;
-      const type = e.currentTarget.dataset.type;
+        const name = e.currentTarget.dataset.name || extractName(url);
-      const name = e.currentTarget.dataset.name || extractName(url);
+        const albumType = e.currentTarget.dataset.albumType;
-      const albumType = e.currentTarget.dataset.albumType;
+  
-      // Remove the button after click.
+        // Remove the button after click
-      e.currentTarget.remove();
+        e.currentTarget.remove();
-      // Start the download for this album.
+  
-      startDownload(url, type, { name }, albumType);
+        // Start the download for this track.
+        startDownload(url, type, { name }, albumType);
+      });
     });
-  });
 }
 
-/**
- * Attaches event listeners to all group download buttons.
- */
-function attachGroupDownloadListeners() {
-  document.querySelectorAll('.group-download-btn').forEach((btn) => {
-    btn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      const albumType = e.currentTarget.dataset.albumType;
-      const artistUrl = e.currentTarget.dataset.artistUrl;
-      // Disable the button to prevent repeated clicks.
-      e.currentTarget.disabled = true;
-      e.currentTarget.textContent = `Queueing ${capitalize(albumType)}s...`;
-      // Initiate a download for this album group.
-      startDownload(artistUrl, 'artist', { name: `All ${capitalize(albumType)}s` }, albumType)
-        .then(() => {
-          e.currentTarget.textContent = `Queued!`;
-        })
-        .catch(err => {
-          showError('Failed to queue group download: ' + err.message);
-          e.currentTarget.disabled = false;
-        });
-    });
-  });
-}
-
-/**
- * Initiates the whole artist download by calling the artist endpoint.
- */
-async function downloadWholeArtist(artistData) {
-  // Use the artist external URL from the first album's artist object.
-  const artistUrl = artistData.items[0]?.artists[0]?.external_urls.spotify;
-  if (!artistUrl) throw new Error('Artist URL not found.');
-  // Queue the whole artist download with the descriptive artist name.
-  startDownload(artistUrl, 'artist', { name: artistData.items[0]?.artists[0]?.name || 'Artist' });
-}
-
-/**
- * Starts the download process by building the API URL,
- * fetching download details, and then adding the download to the queue.
- */
 async function startDownload(url, type, item, albumType) {
-  // Retrieve configuration (if any) from localStorage.
+  // Retrieve configuration (if any) from localStorage
   const config = JSON.parse(localStorage.getItem('activeConfig')) || {};
   const {
     fallback = false,
@@ -264,11 +168,12 @@ async function startDownload(url, type, item, albumType) {
   let apiUrl = '';
 
   // Build API URL based on the download type.
-  if (type === 'artist') {
+  if (type === 'album') {
-    // Use the dedicated artist download endpoint.
+    apiUrl = `/api/album/download?service=${service}&url=${encodeURIComponent(url)}`;
+  } else if (type === 'artist') {
     apiUrl = `/api/artist/download?service=${service}&artist_url=${encodeURIComponent(url)}&album_type=${encodeURIComponent(albumType || 'album,single,compilation')}`;
   } else {
-    // Default: track or other type.
+    // Default is track download.
     apiUrl = `/api/${type}/download?service=${service}&url=${encodeURIComponent(url)}`;
   }
 
@@ -293,19 +198,4 @@ async function startDownload(url, type, item, albumType) {
   } catch (error) {
     showError('Download failed: ' + error.message);
   }
-}
+}
-
-/**
- * A helper function to extract a display name from the URL.
- */
-function extractName(url) {
-  return url;
-}
-
-/**
- * Helper to capitalize the first letter of a string.
- */
-function capitalize(str) {
-  if (!str) return '';
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}

templates/main.html

@@ -4,10 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Spotizerr</title>
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/main/base.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/main/main.css') }}" />
   <link rel="stylesheet" href="{{ url_for('static', filename='css/main/icons.css') }}" />
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/main/results-grid.css') }}" />
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/main/search-header.css') }}" />
   <link rel="stylesheet" href="{{ url_for('static', filename='css/queue/queue.css') }}">
 </head>
 <body>