archicratie-edition/src/components/EditionToc.astro

---
import { getCollection } from "astro:content";

const {
  currentSlug,
  collection = "archicrat-ia",
  basePath = "/archicrat-ia",
  label = "Table des matières"
} = Astro.props;

const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
const hrefOf = (entry) => `${basePath}/${slugOf(entry)}/`;

const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });

const entries = [...await getCollection(collection)].sort((a, b) => {
  const ao = Number(a.data.order ?? 9999);
  const bo = Number(b.data.order ?? 9999);
  if (ao !== bo) return ao - bo;

  const at = String(a.data.title ?? a.data.term ?? slugOf(a));
  const bt = String(b.data.title ?? b.data.term ?? slugOf(b));
  return collator.compare(at, bt);
});
---

<nav class="toc-global" aria-label={label}>
  <div class="toc-global__head">
    <div class="toc-global__title">{label}</div>
  </div>

  <ol class="toc-global__list">
    {entries.map((e) => {
      const slug = slugOf(e);
      const active = slug === currentSlug;

      return (
        <li class={`toc-item ${active ? "is-active" : ""}`}>
          <a class="toc-link" href={hrefOf(e)} aria-current={active ? "page" : undefined}>
            <span class="toc-link__row">
              {active ? (
                <span class="toc-active-indicator" aria-hidden="true">👉</span>
              ) : (
                <span class="toc-active-spacer" aria-hidden="true"></span>
              )}

              <span class="toc-link__title">{e.data.title}</span>

              {active && (
                <span class="toc-badge" aria-label="Chapitre en cours">
                  En cours
                </span>
              )}
            </span>

            {active && <span class="toc-underline" aria-hidden="true"></span>}
          </a>
        </li>
      );
    })}
  </ol>
</nav>

<style>
  .toc-global{
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 16px;
    padding: 12px;
    background: rgba(127,127,127,0.06);
  }

  .toc-global__head{
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(127,127,127,0.25);
  }

  .toc-global__title{
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
    opacity: .88;
  }

  .toc-global__list{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .toc-global__list li::marker{ content: ""; }

  .toc-item{ margin: 6px 0; }

  .toc-link{
    display: block;
    text-decoration: none;
    border-radius: 14px;
    padding: 8px 10px;
    transition: transform 120ms ease, background 120ms ease;
  }

  .toc-link:hover{
    background: rgba(127,127,127,0.10);
    text-decoration: none;
    transform: translateY(-1px);
  }

  .toc-link__row{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
  }

  .toc-active-indicator{
    font-size: 14px;
    line-height: 1;
  }

  .toc-active-spacer{
    width: 14px;
  }

  .toc-link__title{
    font-size: 13px;
    line-height: 1.25;
    max-width: 100%;
  }

  .toc-badge{
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(127,127,127,0.30);
    background: rgba(127,127,127,0.10);
    opacity: .92;
    white-space: nowrap;
  }

  .toc-item.is-active .toc-link{
    background: rgba(127,127,127,0.12);
  }

  .toc-item.is-active .toc-link__title{
    font-weight: 800;
  }

  .toc-underline{
    display: block;
    margin-top: 8px;
    height: 1px;
    width: 100%;
    background: rgba(127,127,127,0.35);
    border-radius: 999px;
  }

  .toc-global__list{
    max-height: 44vh;
    overflow: auto;
    padding-right: 8px;
    scrollbar-gutter: stable;
  }

  @media (prefers-color-scheme: dark){
    .toc-global{ background: rgba(255,255,255,0.04); }
    .toc-link:hover{ background: rgba(255,255,255,0.06); }
    .toc-item.is-active .toc-link{ background: rgba(255,255,255,0.06); }
    .toc-badge{ background: rgba(255,255,255,0.06); }
  }
</style>

<script is:inline>
(() => {
  const active = document.querySelector(".toc-global .toc-item.is-active");
  if (active) active.scrollIntoView({ block: "nearest" });
})();
</script>