SAE_riot/components/favorites.riot

<favorites>
  <h2>Mes favoris</h2>

  <div if={state.loading}>
    <p>Chargement des favoris...</p>
  </div>

  <div if={!state.loading && state.favorites.items.length === 0}>
    <p>Aucun favori trouvé.</p>
  </div>

  <div if={!state.loading && state.favorites.items.length > 0}>
    <div class="results-grid">
      <div class="card" each={item in state.favorites.items}>
        <a onclick={() => removeFavoris(item.id)}>
          <button><i class="fa-solid fa-star"></i></button>
        </a>
        <a href={"#/release-details/" + item.id}>
          <h4>{item.title}</h4>
          <img src={item.thumb} alt="cover" />
          <div if={item.type !== 'artist'}>
            <p>{item.year}</p>
            <footer>
              {item.community?.want} <i class="fa-solid fa-check"></i>
              {item.community?.have} <i class="fa-regular fa-heart"></i>
            </footer>
          </div>
        </a>
      </div>
    </div>
  </div>

  <script>
    export default {
      state: {
        favorites: {
          items: []
        },
        loading: true
      },

      async onMounted() {
        const ids = await window.getFavorites();

        const items = [];
        for (const id of ids) {
          const release = await window.getReleaseDetails(id);
          items.push(release);
        }

        this.state.favorites.items = items;
        this.state.loading = false;
        this.update();
      },

      async removeFavoris(id) {
        await window.removeFavorite(id);
        this.state.favorites.items = this.state.favorites.items.filter(item => item.id !== id);
        this.update();
      }
    }
  </script>

  <style>
    .results-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }

    .card {
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
        padding: 1rem;
        text-align: center;
        transition: transform 0.2s ease;
    }

    .card:hover {
        transform: translateY(-4px);
    }

    .card img {
        width: 100%;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }

    .card h4 {
        font-size: 1.1rem;
        margin: 0.5rem 0;
    }

    footer {
        display: flex;
        justify-content: space-around;
        font-size: 0.9rem;
        color: #666;
    }

    .card a i.fa-star {
        color: #fbc02d;
        font-size: 1.3rem;
        transition: transform 0.2s ease;
    }

    .card a i.fa-star:hover {
        transform: scale(1.2);
    }

  </style>
</favorites>