dynamic add and remove to favs thanks to css

assets/styles/app.css

@@ -155,6 +155,10 @@ main:is(#searchResults, #favorites) {
     }
 }
 
+main#favorites > div.results > :not(section.fav) {
+    display: none;
+}
+
 section.album {
     display: flex;
     flex-direction: column;
@@ -167,8 +171,20 @@ section.album {
     transition: all ease-out 0.15s;
     box-shadow: var(--shadow);
     border-radius: var(--radius);
+    & > button.toFav {
+        display: block;
+    }
+    & > p.alreadyFav {
+        display: none;
+    }
     &.fav {
         transform: rotate(-1deg);
+        & > p.alreadyFav {
+            display: block;
+        }
+        & > button.toFav {
+            display: none;
+        }
     }
     &:hover {
         transform: scale(1.01);

templates/favorite/index.html.twig

@@ -10,7 +10,6 @@
         fetch("/favorite/remove/" + id).then((data) => {
             if (data.status == 200) {
                 document.querySelector("#id" + id).classList.remove("fav");
-                alert("Removed from favs");
             }
         });
     }
@@ -21,8 +20,10 @@
         {% set main_artist = album_liked["artists_sort"] %}
         {% set artists = album_liked["artists"] %}
         {% set album = album_liked["title"] %}
-        <section class="album fav">
+        {% set fruit = album_liked["fruit"] %}
+        <section class="album fav" id="id{{album_liked['id']}}">
             <span>
+                <h1>{{fruit}}</h1>
                 <h2>{{album}}</h2>
                 by
                 {% for artist in artists %}

templates/search/search.html.twig

@@ -7,7 +7,6 @@ endblock %} {% block body %}
         fetch("/favorite/add/" + id).then((data) => {
             if (data.status == 200) {
                 document.querySelector("#id" + id).classList.add("fav");
-                alert("Added to favs");
             }
         });
     }
@@ -31,16 +30,13 @@ endblock %} {% block body %}
                 src="{{result['cover_image']}}"
                 alt="{{album ~ ' by ' ~ artist}}"
             />
-            {% if result['isLiked'] == 'true' %}
+            <p class="alreadyFav">
-            <p>
                 <b>Already fav</b>, go to
                 <a href="{{url('app_favorite')}}">favorites</a>
             </p>
-            {% else %}
+            <button class="toFav" onclick="addToFavs({{result['id']}})">
-            <button onclick="addToFavs({{result['id']}})">
                 Add to favorites
             </button>
-            {% endif %}
         </section>
         {% endfor %}
     </div>