davebb/linear-coding-agent
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: Add author/work/hierarchy display and align colors with design charter

Browse Source 
Hierarchical search improvements:
- Display author and work for each chunk using badge-author and badge-work
- Show section hierarchy (sectionPath) in chunk metadata
- Add 📍 icon for section path in headers

Color alignment with charter:
- Replace Bootstrap colors (#007bff, #28a745, #6c757d) with charter variables
- section-group: border and shadow use accent colors (125,110,88)
- section-header: border uses var(--color-accent)
- chunk-item: border-left uses var(--color-accent-alt)
- Mode badges: hierarchical=accent-alt, simple=accent
- Concept badges: subtle beige background with accent border
- Alert boxes: beige background instead of yellow

Visual improvements:
- Add hover transform effect on chunks (translateX)
- Smoother color transitions using CSS variables
This commit is contained in:
David Blanc Brioir
2026-01-01 15:39:07 +01:00
parent f49279fee3
commit 80464f9f69
1 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
generations/library_rag/templates/search.html
View File

@@ -6,23 +6,23 @@
<style> <style>
.section-group { .section-group {
margin-bottom: 2rem; margin-bottom: 2rem;
border: 1px solid #dee2e6; border: 1px solid rgba(125, 110, 88, 0.2);
border-radius: 8px; border-radius: 8px;
padding: 1.5rem; padding: 1.5rem;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); background: linear-gradient(135deg, var(--color-bg-main) 0%, #ffffff 100%);
box-shadow: 0 2px 4px rgba(0,0,0,0.05); box-shadow: 0 2px 8px rgba(125, 110, 88, 0.08);
} }
.section-header { .section-header {
margin-bottom: 1rem; margin-bottom: 1rem;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
border-bottom: 2px solid #007bff; border-bottom: 2px solid var(--color-accent);
} }
.summary-text { .summary-text {
margin: 0.5rem 0; margin: 0.5rem 0;
font-style: italic; font-style: italic;
color: #555; color: var(--color-text-main);
line-height: 1.5; line-height: 1.5;
} }
@@ -39,14 +39,15 @@
background: white; background: white;
padding: 1rem; padding: 1rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
border-left: 3px solid #007bff; border-left: 3px solid var(--color-accent-alt);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(85, 107, 99, 0.12);
transition: box-shadow 0.2s ease; transition: box-shadow 0.2s ease, transform 0.2s ease;
} }
.chunk-item:hover { .chunk-item:hover {
box-shadow: 0 2px 6px rgba(0,0,0,0.12); box-shadow: 0 2px 6px rgba(85, 107, 99, 0.18);
transform: translateX(2px);
} }
</style> </style>
<section class="section"> <section class="section">
@@ -138,11 +139,11 @@
</div> </div>
<div> <div>
{% if results_data.mode == "hierarchical" %} {% if results_data.mode == "hierarchical" %}
<span class="badge" style="background-color: #28a745; color: white; font-size: 0.9em;"> <span class="badge" style="background-color: var(--color-accent-alt); color: white; font-size: 0.9em;">
🌳 Recherche hiérarchique ({{ results_data.sections|length }} sections) 🌳 Recherche hiérarchique ({{ results_data.sections|length }} sections)
</span> </span>
{% else %} {% else %}
<span class="badge" style="background-color: #6c757d; color: white; font-size: 0.9em;"> <span class="badge" style="background-color: var(--color-accent); color: white; font-size: 0.9em;">
📄 Recherche simple 📄 Recherche simple
</span> </span>
{% endif %} {% endif %}
@@ -162,7 +163,7 @@
<!-- Fallback reason warning (when forced hierarchical but no results) --> <!-- Fallback reason warning (when forced hierarchical but no results) -->
{% if results_data.fallback_reason %} {% if results_data.fallback_reason %}
<div class="alert" style="background-color: #fff3cd; border: 1px solid #ffc107; color: #856404; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;"> <div class="alert" style="background-color: rgba(125, 110, 88, 0.1); border: 1px solid var(--color-accent); color: var(--color-text-strong); padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
<strong>⚠️ Mode hiérarchique forcé :</strong> {{ results_data.fallback_reason }} <strong>⚠️ Mode hiérarchique forcé :</strong> {{ results_data.fallback_reason }}
<br> <br>
<small>💡 Essayez une requête sur un sujet présent dans le corpus (ex: "croyance", "signe", "inférence") ou basculez en mode Auto-détection.</small> <small>💡 Essayez une requête sur un sujet présent dans le corpus (ex: "croyance", "signe", "inférence") ou basculez en mode Auto-détection.</small>
@@ -178,17 +179,17 @@
<div class="section-header"> <div class="section-header">
<h3 style="margin: 0 0 0.5rem 0; font-size: 1.3em;"> <h3 style="margin: 0 0 0.5rem 0; font-size: 1.3em;">
📂 {{ section.title }} 📂 {{ section.title }}
<span class="badge" style="background-color: #007bff; color: white; margin-left: 0.5rem;">{{ section.chunks_count }} passage{% if section.chunks_count > 1 %}s{% endif %}</span> <span class="badge" style="background-color: var(--color-accent-alt); color: white; margin-left: 0.5rem;">{{ section.chunks_count }} passage{% if section.chunks_count > 1 %}s{% endif %}</span>
<span class="badge badge-success" style="margin-left: 0.5rem;">⚡ {{ section.similarity }}% similaire</span> <span class="badge badge-similarity" style="margin-left: 0.5rem;">⚡ {{ section.similarity }}% similaire</span>
</h3> </h3>
<p class="text-muted" style="margin: 0.25rem 0; font-size: 0.9em;">{{ section.section_path }}</p> <p class="text-muted" style="margin: 0.25rem 0; font-size: 0.9em;">📍 {{ section.section_path }}</p>
{% if section.summary_text %} {% if section.summary_text %}
<p class="summary-text" style="margin: 0.5rem 0; font-style: italic; color: #555;">{{ section.summary_text }}</p> <p class="summary-text" style="margin: 0.5rem 0; font-style: italic; color: #555;">{{ section.summary_text }}</p>
{% endif %} {% endif %}
{% if section.concepts %} {% if section.concepts %}
<div class="concepts" style="margin-top: 0.5rem;"> <div class="concepts" style="margin-top: 0.5rem;">
{% for concept in section.concepts %} {% for concept in section.concepts %}
<span class="badge badge-info" style="margin-right: 0.25rem;">{{ concept }}</span> <span class="badge" style="background-color: rgba(125, 110, 88, 0.15); color: var(--color-accent); border: 1px solid rgba(125, 110, 88, 0.3); margin-right: 0.25rem;">{{ concept }}</span>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
@@ -198,15 +199,21 @@
{% if section.chunks %} {% if section.chunks %}
<div class="chunks-list" style="margin-left: 1.5rem; margin-top: 1rem;"> <div class="chunks-list" style="margin-left: 1.5rem; margin-top: 1rem;">
{% for chunk in section.chunks %} {% for chunk in section.chunks %}
<div class="chunk-item" style="background: white; padding: 1rem; margin-bottom: 0.75rem; border-left: 3px solid #007bff; border-radius: 4px;"> <div class="chunk-item" style="background: white; padding: 1rem; margin-bottom: 0.75rem; border-left: 3px solid var(--color-accent-alt); border-radius: 4px;">
<div style="margin-bottom: 0.5rem;"> <div style="margin-bottom: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
<span class="badge badge-success">⚡ {{ chunk.similarity }}% similaire</span> {% if chunk.work and chunk.work.author %}
<span class="badge badge-author">{{ chunk.work.author }}</span>
{% endif %}
{% if chunk.work and chunk.work.title %}
<span class="badge badge-work">{{ chunk.work.title }}</span>
{% endif %}
<span class="badge badge-similarity">⚡ {{ chunk.similarity }}% similaire</span>
</div> </div>
<div class="passage-text" style="margin-bottom: 0.5rem;">"{{ chunk.text }}"</div> <div class="passage-text" style="margin-bottom: 0.5rem;">"{{ chunk.text }}"</div>
<div class="passage-meta" style="font-size: 0.85em; color: #666;"> <div class="passage-meta" style="font-size: 0.85em; color: #666;">
<strong>Section :</strong> {{ chunk.sectionPath or section.section_path or '—' }} &nbsp;│&nbsp;
<strong>Type :</strong> {{ chunk.unitType or '—' }} &nbsp;│&nbsp; <strong>Type :</strong> {{ chunk.unitType or '—' }} &nbsp;│&nbsp;
<strong>Langue :</strong> {{ (chunk.language or '—') | upper }} &nbsp;│&nbsp; <strong>Langue :</strong> {{ (chunk.language or '—') | upper }}
<strong>Index :</strong> {{ chunk.orderIndex or '—' }}
</div> </div>
{% if chunk.keywords %} {% if chunk.keywords %}
<div style="margin-top: 0.5rem;"> <div style="margin-top: 0.5rem;">