refactor: Réorganisation header section en 3 lignes claires

Ligne 1 : Auteur | Œuvre | Similarité | Nb passages
Ligne 2 : 🗂️ Hiérarchie (chapterTitle)
Ligne 3 : 📂 Titre section

Plus compact et hiérarchie mieux visible avant le titre
This commit is contained in:
2026-01-01 23:59:00 +01:00
parent 6a2ec10d7b
commit 3d20a54d06

View File

@@ -181,36 +181,32 @@
<div class="section-group" style="margin-bottom: 2.5rem; border: 2px solid rgba(125, 110, 88, 0.3); border-radius: 10px; overflow: hidden; box-shadow: 0 3px 12px rgba(125, 110, 88, 0.12);">
<!-- Section header (fond beige distinct) -->
<div class="section-header" style="margin: 0; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, rgba(125, 110, 88, 0.12) 0%, rgba(125, 110, 88, 0.06) 100%); border-bottom: 3px solid var(--color-accent);">
<!-- Auteur et œuvre (récupérés du premier chunk) -->
{% if section.chunks and section.chunks[0].work %}
<!-- Ligne 1 : Auteur, œuvre, similarité, nb passages -->
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;">
{% if section.chunks and section.chunks[0].work %}
{% if section.chunks[0].work.author %}
<span class="badge badge-author">{{ section.chunks[0].work.author }}</span>
{% endif %}
{% if section.chunks[0].work.title %}
<span class="badge badge-work">{{ section.chunks[0].work.title }}</span>
{% endif %}
</div>
{% endif %}
<!-- Titre section + icône -->
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap;">
<span style="font-size: 1.3em; color: var(--color-accent);">📂</span>
<h4 style="margin: 0; font-size: 1.2em; font-weight: 600; color: var(--color-text-strong); font-family: var(--font-title);">{{ section.title[:120] }}{% if section.title|length > 120 %}...{% endif %}</h4>
</div>
<!-- Hiérarchie (chapter title du premier chunk) -->
{% if section.chunks and section.chunks[0].chapterTitle %}
<div style="margin-bottom: 0.75rem;">
<span style="font-size: 0.9em; color: var(--color-accent); font-family: monospace; background: rgba(125, 110, 88, 0.08); padding: 0.25rem 0.5rem; border-radius: 4px;">🗂️ {{ section.chunks[0].chapterTitle }}</span>
</div>
{% endif %}
<!-- Badges similarité et nombre passages -->
<div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem;">
<span class="badge badge-similarity">⚡ {{ section.similarity }}% similaire</span>
<span class="badge" style="background-color: var(--color-accent); color: white; font-weight: 500;">{{ section.chunks_count }} passage{% if section.chunks_count > 1 %}s{% endif %}</span>
</div>
<!-- Ligne 2 : Hiérarchie (chapter title du premier chunk) -->
{% if section.chunks and section.chunks[0].chapterTitle %}
<div style="margin-bottom: 0.5rem;">
<span style="font-size: 0.9em; color: var(--color-accent); background: rgba(125, 110, 88, 0.08); padding: 0.25rem 0.5rem; border-radius: 4px;">🗂️ {{ section.chunks[0].chapterTitle }}</span>
</div>
{% endif %}
<!-- Ligne 3 : Titre section + icône -->
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap;">
<span style="font-size: 1.3em; color: var(--color-accent);">📂</span>
<h4 style="margin: 0; font-size: 1.2em; font-weight: 600; color: var(--color-text-strong); font-family: var(--font-title);">{{ section.title[:120] }}{% if section.title|length > 120 %}...{% endif %}</h4>
</div>
{% if section.summary_text and section.summary_text != section.title and section.summary_text != section.section_path %}
<p class="summary-text" style="margin: 0.75rem 0 0 0; padding: 0.75rem; background: rgba(255, 255, 255, 0.5); border-radius: 4px; font-size: 0.9em; color: var(--color-text-main); font-style: italic; line-height: 1.6;">{{ section.summary_text[:250] }}{% if section.summary_text|length > 250 %}...{% endif %}</p>
{% endif %}