feat: Make album tracklist collapsible, simplify "Add to collection" text, add modal blur styling, and remove About page footer.

Author: Jeanball

frontend/src/components/Settings/AboutSettings.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Heart } from 'lucide-react';
+
 import { useTranslation } from 'react-i18next';
 import axios from 'axios';
 
@@ -74,11 +74,7 @@ const AboutSettings: React.FC = () => {
                     </div>
                 </div>
 
-                <div className="text-xs opacity-70 mt-4 text-center">
-                    <div className="text-xs opacity-70 mt-4 text-center flex justify-center items-center gap-1">
-                        {t('settings.madeWith')} <Heart size={12} className="text-error" fill="currentColor" /> {t('settings.by')} <a href="https://github.com/jeanball" target="_blank" rel="noopener noreferrer" className="link link-hover">Jeanball</a>
-                    </div>
-                </div>
+
             </div>
         </div>
     );

frontend/src/index.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer components {
+  .modal-box {
+    background-color: oklch(var(--b1) / 0.75) !important;
+    backdrop-filter: blur(8px) !important;
+  }
+}

frontend/src/locales/de/translation.json

@@ -226,7 +226,7 @@
         "selectFormat": "Format zum Hinzufügen auswählen",
         "goBack": "Zurück",
         "confirmAddTitle": "Zur Sammlung hinzufügen?",
-        "confirmAddYes": "Ja, hinzufügen"
+        "confirmAddYes": "Hinzufügen"
     },
     "search": {
         "placeholder": "Suchen Sie nach Künstlern oder Alben...",

frontend/src/locales/en/translation.json

@@ -244,7 +244,7 @@
         "selectFormat": "Select a format to add",
         "goBack": "Go Back",
         "confirmAddTitle": "Add to your collection?",
-        "confirmAddYes": "Yes, add it"
+        "confirmAddYes": "Add"
     },
     "search": {
         "placeholder": "Search for artists or albums...",

frontend/src/locales/es/translation.json

@@ -226,7 +226,7 @@
         "selectFormat": "Selecciona un formato para añadir",
         "goBack": "Volver",
         "confirmAddTitle": "¿Añadir a tu colección?",
-        "confirmAddYes": "Sí, añadir"
+        "confirmAddYes": "Añadir"
     },
     "search": {
         "placeholder": "Buscar artistas o álbumes...",

frontend/src/locales/fr/translation.json

@@ -244,7 +244,7 @@
         "selectFormat": "Sélectionnez un format à ajouter",
         "goBack": "Retour",
         "confirmAddTitle": "Ajouter à votre collection ?",
-        "confirmAddYes": "Oui, ajouter"
+        "confirmAddYes": "Ajouter"
     },
     "search": {
         "placeholder": "Rechercher des artistes ou des albums...",

frontend/src/locales/pt/translation.json

@@ -226,7 +226,7 @@
         "selectFormat": "Selecione um formato para adicionar",
         "goBack": "Voltar",
         "confirmAddTitle": "Adicionar à sua coleção?",
-        "confirmAddYes": "Sim, adicionar"
+        "confirmAddYes": "Adicionar"
     },
     "search": {
         "placeholder": "Buscar artistas ou álbuns...",

frontend/src/locales/zh/translation.json

@@ -226,7 +226,7 @@
         "selectFormat": "选择要添加的格式",
         "goBack": "返回",
         "confirmAddTitle": "添加到您的收藏？",
-        "confirmAddYes": "是的，添加"
+        "confirmAddYes": "添加"
     },
     "search": {
         "placeholder": "搜索艺术家或专辑...",

frontend/src/pages/AlbumDetailPage.tsx

@@ -293,14 +293,14 @@ const AlbumDetailPage: React.FC = () => {
 
             {/* Tracklist Section */}
             {tracklist.length > 0 && (
-                <div className="card bg-base-200 shadow-xl mb-8">
-                    <div className="card-body">
-                        <h2 className="card-title text-2xl mb-4 flex items-center gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
-                            </svg>
-                            {t('album.tracklist')} ({t('album.trackCount', { count: tracklist.length })})
-                        </h2>
+                <details className="collapse collapse-arrow bg-base-200 shadow-xl mb-8">
+                    <summary className="collapse-title text-2xl font-bold flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
+                        </svg>
+                        {t('album.tracklist')} ({t('album.trackCount', { count: tracklist.length })})
+                    </summary>
+                    <div className="collapse-content">
                         <div className="overflow-x-auto">
                             <table className="table table-zebra">
                                 <thead>
@@ -327,7 +327,7 @@ const AlbumDetailPage: React.FC = () => {
                             </table>
                         </div>
                     </div>
-                </div>
+                </details>
             )}
 
             {/* Rematch Modal */}