ambient/src/pages/collection.astro

---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import EventCard from "../components/EventCard.astro";
import BankCard from "../components/BankCard.astro";

const allHumans = await getCollection("humans");
const myHumans = allHumans.filter((entry: any) =>
    entry.id.startsWith("latchimynicolas/"),
);

const allEvents = await getCollection("events");
const allBanks = await getCollection("banks");

// 1. Tri
const sortedEntries = allHumans.sort(
    (a: any, b: any) =>
        new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
);

const sortedEvents = allEvents.sort(
    (a: any, b: any) =>
        new Date(a.data.date).getTime() - new Date(b.data.date).getTime(),
);

const sortedBanks = allBanks.sort((a: any, b: any) =>
    a.data.name.localeCompare(b.data.name),
);

// 2. Groupement
const groupedHumans = sortedEntries.reduce((acc: any, entry: any) => {
    const userName = entry.data.name;
    if (!acc[userName]) acc[userName] = [];
    acc[userName].push(entry);
    return acc;
}, {});
---

<Layout title="Collection">
    <header class="collection-header">
        <a href="/" class="back-link">← Retour au flux</a>
        <h1>Collection</h1>
        <p class="back-link">
            Cliquer sur un titre pour ouvrir/fermer, ou une carte pour les
            détails.
        </p>
    </header>

    <main class="collection-container">
        {/* SECTION HUMAINS */}
        {
            Object.entries(groupedHumans).map(([userName, cards]) => (
                <details class="user-collection">
                    <summary class="user-title">
                        {userName}
                        <span>({(cards as any[]).length} souffles)</span>
                    </summary>

                    <div class="user-flex-row">
                        {(cards as any[]).map((entry) => (
                            <a
                                href={`/${entry.id.replace(/\.md$/, "")}`}
                                class="card-link"
                            >
                                <div class="card-scaler">
                                    <Card frontmatter={entry.data} />
                                    <div class="entry-meta">
                                        <p>
                                            {new Date(
                                                entry.data.date,
                                            ).toLocaleDateString("fr-FR")}
                                        </p>
                                    </div>
                                </div>
                            </a>
                        ))}
                    </div>
                    <hr class="separator" />
                </details>
            ))
        }

        {/* SECTION ÉVÉNEMENTS */}
        {
            sortedEvents.length > 0 && (
                <details class="user-collection">
                    <summary class="user-title">
                        Événements <span>({sortedEvents.length} cartes)</span>
                    </summary>
                    <div class="user-flex-row">
                        {sortedEvents.map((event) => (
                            <a
                                href={`/${event.id.replace(/\.md$/, "")}`}
                                class="card-link"
                            >
                                <div class="card-scaler">
                                    <EventCard frontmatter={event.data} />
                                    <div class="entry-meta">
                                        <p>
                                            Détecté le :{" "}
                                            {event.data.target_date}
                                        </p>
                                    </div>
                                </div>
                            </a>
                        ))}
                    </div>
                    <hr class="separator" />
                </details>
            )
        }

        {/* SECTION TRÉSORERIES */}
        <details class="user-collection">
            <summary class="user-title">
                Trésoreries <span>(Sources de Flux)</span>
            </summary>
            <div class="user-flex-row">
                {
                    sortedBanks.map((bank) => (
                        <div class="card-link">
                            <div class="card-scaler">
                                {bank.data.sub_category === "finances" ? (
                                    <BankCard
                                        frontmatter={bank.data}
                                        allHumans={myHumans}
                                    />
                                ) : (
                                    <div class="tcg-card">
                                        Objet: {bank.data.name}
                                    </div>
                                )}
                            </div>
                        </div>
                    ))
                }
            </div>
            <hr class="separator" />
        </details>
    </main>
</Layout>

<style>
    .collection-header {
        padding: 40px;
        text-align: center;
    }

    .back-link {
        color: #64748b;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .collection-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px 40px;
    }

    /* Accordéon Style */
    .user-collection {
        margin-bottom: 20px;
        display: block;
    }

    summary {
        display: flex;
        flex-direction: column;
    }

    .user-title {
        font-family: "Philosopher", serif;
        font-size: 1.5rem;
        color: #1e293b;
        margin-bottom: 25px;
        border-left: 5px solid #333;
        padding-left: 15px;
        cursor: pointer;
        list-style: none; /* Cache la flèche par défaut */
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .user-title::-webkit-details-marker {
        display: none;
    }

    .user-title::before {
        content: "▸";
        font-size: 1rem;
        color: #94a3b8;
        transition: transform 0.2s ease;
    }

    details[open] .user-title::before {
        transform: rotate(90deg);
    }

    .user-title span {
        font-size: 0.9rem;
        color: #94a3b8;
        font-weight: normal;
    }

    .user-flex-row {
        display: flex;
        flex-wrap: wrap;
        gap: 45px;
        justify-content: flex-start;
        padding: 20px 0;
        margin-bottom: 40px;
    }

    .entry-meta {
        font-family: "Inter", sans-serif;
        position: relative;
        top: 5px;
        font-size: 0.8rem;
        color: #94a3b8;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 1px;
    }

    .card-link {
        text-decoration: none;
        transition: transform 0.3s ease;
        width: 230px;
        height: 375px;
        overflow: visible;
        display: block;
    }

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

    .card-scaler {
        transform: scale(0.8);
        transform-origin: top left;
        width: 300px;
        height: 440px;
    }

    .separator {
        margin-top: 10px;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    @media (max-width: 480px) {
        .user-flex-row {
            gap: 10px;
            justify-content: center;
        }

        .card-link {
            width: calc(45%);
            height: 190px;
        }

        .card-scaler {
            transform: scale(0.4) !important;
            width: 300px;
            height: 440px;
        }

        .entry-meta {
            font-size: 0.5rem;
            margin-top: -5px;
        }
    }
</style>