Menu en haut, retour explicite, et bibliographie qui ne rappelle plus la BnF

Navigation
- La barre d'onglets du bas devient un menu en haut, sur le repli du gabarit Blazor :
  bascule sur téléphone, rangée sur PC. Cela renverse la décision du 2026-08-18 (le
  pouce atteint le bas de l'écran) : le raisonnement reste juste, mais il ne vaut rien
  face à une barre qui s'affiche mal. Le point tenu est qu'il existe désormais un état
  de repli — sans feuille de style, il reste une liste de liens lisible.
- Bouton « retour » dans le bandeau, sur tous les écrans, appuyé sur l'historique du
  navigateur, avec repli sur le catalogue quand la pile est vide (PWA ouverte depuis
  l'écran d'accueil).
- Le pictogramme de la marque passe en SVG en ligne : le fichier logo-bandeau.svg
  pouvait manquer sur un appareil dont le cache précédait son ajout, d'où l'icône cassée.

Bibliographie
- Case à cocher à gauche du titre, ligne centrée verticalement, boutons groupés à droite.
- Barre de sélection collante EN HAUT, avec masquage groupé et « tout décocher ».
- « Nouveautés » et « Ses livres chez vous » remontent à côté du filtre.
- ⚠️ « Je le veux » et « Masquer » ne rechargent plus rien : ils basculent un drapeau
  personnel que le client connaît déjà. Auparavant chaque clic vidait le cache des
  bibliographies et relançait la BnF (une seconde par page, jusqu'à dix pages pour les
  nouveautés, qui ne sont pas mises en cache) puis relisait tout le catalogue.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
mathieu
2026-08-20 20:35:39 +02:00
co-authored by Claude Opus 5
parent c256394c77
commit 83089d7479
9 changed files with 645 additions and 246 deletions
+256 -155
View File
@@ -95,6 +95,8 @@ else if (_bibliographie is { } biblio)
auteur traduit n'y a souvent pas de notice à son nom.
</p>
}
<BasculeBibliographie Biblio="biblio" />
}
else if (biblio.Avertissement is not null)
{
@@ -164,7 +166,14 @@ else if (_bibliographie is { } biblio)
aria-expanded="@_filtresOuverts">
Filtrer (@NombreFiltres)
</button>
@* Les deux bascules d'écran vivent ICI, à côté du filtre, et non plus dans une barre
flottante en bas : « toute la bibliographie / les nouveautés » et « ses livres chez
vous » sont trois façons de restreindre la même liste. Les chercher en bas d'un
écran qui défile sur cinquante lignes n'avait pas de sens. *@
<BasculeBibliographie Biblio="biblio" />
</div>
@if (_filtresOuverts)
{
<div class="filtres">
@@ -190,120 +199,161 @@ else if (_bibliographie is { } biblio)
</div>
}
@*
La barre de sélection est EN HAUT, au-dessus de la liste, et non plus flottante en
bas : on coche en descendant, et il fallait auparavant redescendre jusqu'au bas de
l'écran pour valider — ou pire, la barre recouvrait les dernières lignes qu'on
venait justement de vouloir cocher.
*@
@if (_selection.Count > 0)
{
<div class="barre-selection" role="group" aria-label="Actions sur la sélection">
<span class="selection-compte">@_selection.Count sélectionnée@(_selection.Count > 1 ? "s" : "")</span>
@if (SelectionADecouvrir(biblio).Count is var aSouhaiter and > 0)
{
<button type="button" class="bouton bouton-compact bouton-principal"
disabled="@(_enCours || !Reseau.EnLigne)"
title="@(Reseau.EnLigne ? null : EtatReseau.MotifHorsLigne)"
@onclick="AjouterSelectionAsync">
Ajouter aux envies (@aSouhaiter)
</button>
}
@if (SelectionParMasquage(biblio, false).Count is var aMasquer and > 0)
{
<button type="button" class="bouton bouton-compact bouton-discret"
disabled="@(_enCours || !Reseau.EnLigne)"
title="@(Reseau.EnLigne ? null : EtatReseau.MotifHorsLigne)"
@onclick="() => MasquerSelectionAsync(true)">
Masquer (@aMasquer)
</button>
}
@if (SelectionParMasquage(biblio, true).Count is var aReafficher and > 0)
{
<button type="button" class="bouton bouton-compact bouton-discret"
disabled="@(_enCours || !Reseau.EnLigne)"
title="@(Reseau.EnLigne ? null : EtatReseau.MotifHorsLigne)"
@onclick="() => MasquerSelectionAsync(false)">
Réafficher (@aReafficher)
</button>
}
<button type="button" class="bouton bouton-compact bouton-discret"
disabled="@_enCours" @onclick="() => _selection.Clear()">
Tout décocher
</button>
</div>
}
<ul class="liste-bibliographie">
@foreach (var oeuvre in Affichees(biblio))
{
@* La classe « oeuvre-possedee » grise la ligne : le livre est déjà sur l'étagère. *@
<li class="carte-oeuvre @(oeuvre.Possede ? "oeuvre-possedee" : null)" @key="oeuvre.Titre">
@*
La case est à GAUCHE du titre, et la ligne est centrée verticalement :
c'est la disposition d'une liste qu'on parcourt en cochant. Elle est
offerte sur TOUTE œuvre visible, pas seulement sur celles à découvrir —
masquer en lot suppose de pouvoir cocher ce qu'on possède déjà.
*@
<label class="oeuvre-case">
<input type="checkbox"
checked="@_selection.Contains(oeuvre.Titre)"
@onchange="e => Selectionner(oeuvre.Titre, e.Value is true)" />
<span class="lecture-ecran">Sélectionner « @oeuvre.Titre »</span>
</label>
@if (oeuvre is { Possede: true, LivreId: { } livreId }
&& _livresCatalogue.FirstOrDefault(l => l.Id == livreId) is { } livre)
{
<CarteLivre Livre="livre" />
}
@if (!oeuvre.Possede || !_livresCatalogue.Any(l => l.Id == oeuvre.LivreId))
else
{
<div class="carte-corps">
<p class="carte-titre">
@if (oeuvre is { Possede: true, LivreId: { } livreIdPossede })
{
<a class="lien-auteur" href="@($"livres/{livreIdPossede}")">@oeuvre.Titre</a>
}
else
{
<button type="button" class="carte-titre oeuvre-titre-bouton"
@onclick="() => BasculerOeuvre(oeuvre.Titre)"
aria-expanded="@_oeuvresOuvertes.Contains(oeuvre.Titre)">
@oeuvre.Titre
</button>
}
</p>
<div class="carte-corps">
<p class="carte-titre">
@if (oeuvre is { Possede: true, LivreId: { } livreIdPossede })
{
<a class="lien-auteur" href="@($"livres/{livreIdPossede}")">@oeuvre.Titre</a>
}
else
{
<button type="button" class="carte-titre oeuvre-titre-bouton"
@onclick="() => BasculerOeuvre(oeuvre.Titre)"
aria-expanded="@_oeuvresOuvertes.Contains(oeuvre.Titre)">
@oeuvre.Titre
</button>
}
</p>
<p class="carte-details">
@if (!string.IsNullOrWhiteSpace(oeuvre.Annee))
{
<span>@oeuvre.Annee</span>
}
@if (!string.IsNullOrWhiteSpace(oeuvre.Editeur))
{
<span>@oeuvre.Editeur</span>
}
@if (oeuvre.NombreEditions > 1)
{
<span class="etiquette">@oeuvre.NombreEditions éditions</span>
}
<p class="carte-details">
@if (!string.IsNullOrWhiteSpace(oeuvre.Annee))
{
<span>@oeuvre.Annee</span>
}
@if (!string.IsNullOrWhiteSpace(oeuvre.Editeur))
{
<span>@oeuvre.Editeur</span>
}
@if (oeuvre.NombreEditions > 1)
{
<span class="etiquette">@oeuvre.NombreEditions éditions</span>
}
@if (oeuvre.Possede)
{
<span class="etiquette etiquette-possede">Déjà chez vous</span>
}
else if (oeuvre.Souhaite)
{
<span class="etiquette etiquette-souhaite">Dans vos envies</span>
}
</p>
</div>
@if (_oeuvresOuvertes.Contains(oeuvre.Titre))
{
<p class="message-discret detail-oeuvre">
@if (!string.IsNullOrWhiteSpace(oeuvre.Isbn))
{
<span>ISBN : @FormatageIsbn.Afficher(oeuvre.Isbn)</span>
}
@if (oeuvre.NombreEditions > 1)
{
<span>@oeuvre.NombreEditions éditions recensées</span>
}
</p>
}
}
@if (oeuvre.Possede)
{
<span class="etiquette etiquette-possede">Déjà chez vous</span>
}
else if (oeuvre.Souhaite)
{
<span class="etiquette etiquette-souhaite">Dans vos envies</span>
}
</p>
@if (oeuvre.ADecouvrir)
{
<div class="actions-formulaire">
<label class="selection-oeuvre">
<input type="checkbox"
checked="@_selection.Contains(oeuvre.Titre)"
@onchange="e => Selectionner(oeuvre.Titre, e.Value is true)" />
Sélectionner
</label>
<button type="button" class="bouton bouton-compact bouton-principal"
disabled="@_enCours" @onclick="() => SouhaiterAsync(oeuvre)"
aria-label="@($"Ajouter « {oeuvre.Titre} » à ma liste d'envies")">
Je le veux
</button>
@if (_oeuvresOuvertes.Contains(oeuvre.Titre))
{
<p class="message-discret detail-oeuvre">
@if (!string.IsNullOrWhiteSpace(oeuvre.Isbn))
{
<span>ISBN : @FormatageIsbn.Afficher(oeuvre.Isbn)</span>
}
@if (oeuvre.NombreEditions > 1)
{
<span>@oeuvre.NombreEditions éditions recensées</span>
}
</p>
}
</div>
}
@if (!oeuvre.Masquee)
{
@* Les boutons sont groupés à droite, centrés sur la même ligne que le titre :
une colonne d'actions alignée se balaie du regard, des boutons empilés au fil
du texte non. *@
<div class="oeuvre-actions">
@if (oeuvre.ADecouvrir)
{
<button type="button" class="bouton bouton-compact bouton-principal"
disabled="@(_enCours || !Reseau.EnLigne)"
title="@(Reseau.EnLigne ? null : EtatReseau.MotifHorsLigne)"
@onclick="() => SouhaiterAsync(oeuvre)"
aria-label="@($"Ajouter « {oeuvre.Titre} » à ma liste d'envies")">
Je le veux
</button>
}
<button type="button" class="bouton bouton-compact bouton-discret"
disabled="@_enCours" @onclick="() => MasquerAsync(oeuvre)">
Masquer
disabled="@(_enCours || !Reseau.EnLigne)"
title="@(Reseau.EnLigne ? null : EtatReseau.MotifHorsLigne)"
@onclick="() => ModifierMasquageAsync(oeuvre, !oeuvre.Masquee)">
@(oeuvre.Masquee ? "Réafficher" : "Masquer")
</button>
}
else
{
<button type="button" class="bouton bouton-compact bouton-discret"
disabled="@_enCours" @onclick="() => DemasquerAsync(oeuvre)">
Réafficher
</button>
}
</div>
</li>
}
</ul>
@if (_selection.Count > 0)
{
<div class="actions-flottantes">
<button type="button" class="bouton bouton-principal"
disabled="@(_enCours || !Reseau.EnLigne)"
title="@(Reseau.EnLigne ? null : EtatReseau.MotifHorsLigne)"
@onclick="AjouterSelectionAsync">
Ajouter la sélection aux envies (@_selection.Count)
</button>
</div>
}
@* Le rapprochement est fait par titre, et il rate des choses (voir CleOeuvre). Le dire
franchement vaut mieux que laisser l'utilisateur découvrir seul qu'un livre qu'il
possède n'est pas grisé. *@
@@ -315,28 +365,6 @@ else if (_bibliographie is { } biblio)
}
}
@* « Retour aux auteurs » est parti : l'onglet Auteurs fait exactement cela, en permanence.
Ne reste que ce qu'aucun onglet ne sait faire — le catalogue restreint à cet auteur. *@
@if (_bibliographie is { } b)
{
<nav class="actions-flottantes">
@if (!b.EstNouveautes)
{
<a class="bouton bouton-discret"
href="@($"auteurs/{b.Auteur.Id}/bibliographie?nouveautes=true")">
Nouveautés
</a>
}
else
{
<a class="bouton bouton-discret" href="@($"auteurs/{b.Auteur.Id}/bibliographie")">
Toute la bibliographie
</a>
}
<a class="bouton bouton-discret" href="@($"?auteur={b.Auteur.Id}")">Ses livres chez vous</a>
</nav>
}
@code {
[Parameter]
public int AuteurId { get; set; }
@@ -375,11 +403,19 @@ else if (_bibliographie is { } biblio)
private int NombreFiltres =>
(_modePossession == 0 ? 0 : 1) + (_masquees > 0 && !_afficherMasquees ? 1 : 0);
/// <summary>Les œuvres cochées qui peuvent effectivement rejoindre la liste d'envies.</summary>
private List<OeuvreBibliographie> SelectionADecouvrir(BibliographieDto biblio) =>
biblio.Oeuvres.Where(o => _selection.Contains(o.Titre) && o.ADecouvrir).ToList();
private List<OeuvreBibliographie> SelectionParMasquage(BibliographieDto biblio, bool masquees) =>
biblio.Oeuvres.Where(o => _selection.Contains(o.Titre) && o.Masquee == masquees).ToList();
private async Task ChargerAsync()
{
_erreur = null;
_reessayable = false;
_chargement = true;
_selection.Clear();
try
{
@@ -396,8 +432,7 @@ else if (_bibliographie is { } biblio)
return;
}
_possedees = _bibliographie.Oeuvres.Count(o => o.Possede);
_masquees = _bibliographie.Oeuvres.Count(o => o.Masquee);
RecompterAsync();
}
catch (Exception)
{
@@ -420,6 +455,44 @@ else if (_bibliographie is { } biblio)
}
}
private void RecompterAsync()
{
_possedees = _bibliographie?.Oeuvres.Count(o => o.Possede) ?? 0;
_masquees = _bibliographie?.Oeuvres.Count(o => o.Masquee) ?? 0;
}
/// <summary>
/// Applique en mémoire ce que l'écriture vient de changer, au lieu de tout recharger.
/// </summary>
/// <remarks>
/// ⚠️ C'est LA correction de lenteur signalée en usage : chaque « Je le veux » et chaque
/// « Masquer » relançaient un <c>ChargerAsync</c> complet, donc une interrogation de la BnF
/// (une seconde par page, jusqu'à dix pages pour les nouveautés, qui ne sont pas mises en
/// cache) suivie d'une relecture de tout le catalogue. L'écran attendait une source
/// distante pour apprendre un drapeau <b>personnel</b> qu'il connaissait déjà.
/// <para>
/// Le cache partagé de <see cref="ServiceLivresApi"/> est corrigé de la même façon de son
/// côté ; ici on corrige la copie que cet écran tient en main, celle des nouveautés n'étant
/// justement pas dans ce cache.
/// </para>
/// </remarks>
private void MettreAJourOeuvre(string titre, Func<OeuvreBibliographie, OeuvreBibliographie> correction)
{
if (_bibliographie is null)
{
return;
}
_bibliographie = _bibliographie with
{
Oeuvres = _bibliographie.Oeuvres
.Select(o => o.Titre == titre ? correction(o) : o)
.ToList(),
};
RecompterAsync();
}
private void Selectionner(string titre, bool selectionnee)
{
if (selectionnee)
@@ -439,48 +512,76 @@ else if (_bibliographie is { } biblio)
return;
}
var saisies = _bibliographie.Oeuvres
.Where(o => _selection.Contains(o.Titre) && o.ADecouvrir)
.Select(o => new EnregistrementSouhait
{
Titre = o.Titre,
Auteur = _bibliographie.Auteur.Nom,
Editeur = o.Editeur,
Annee = o.Annee,
Isbn = o.Isbn,
})
.ToList();
var oeuvres = SelectionADecouvrir(_bibliographie);
var saisies = oeuvres.Select(Saisie).ToList();
_enCours = true;
_message = null;
var resultats = await Api.AjouterSouhaitsAsync(saisies);
_enCours = false;
// Chaque envie réussie bascule sa ligne ; les échecs gardent la leur intacte et sont
// rapportés. Rien n'est rechargé — voir MettreAJourOeuvre.
for (var i = 0; i < oeuvres.Count; i++)
{
if (resultats[i].EstOk)
{
var id = resultats[i].Valeur?.Id;
MettreAJourOeuvre(oeuvres[i].Titre, o => o with { Souhaite = true, SouhaitId = id });
}
}
var erreurs = resultats.Where(r => !r.EstOk).Select(r => r.Erreur).Where(e => e is not null).ToList();
_message = erreurs.Count == 0 ? null : string.Join(" ", erreurs);
_selection.Clear();
await ChargerAsync();
}
private async Task MasquerAsync(OeuvreBibliographie oeuvre)
/// <summary>Masque (ou réaffiche) toutes les œuvres cochées qui sont dans l'autre état.</summary>
private async Task MasquerSelectionAsync(bool masquer)
{
await ModifierMasquageAsync(oeuvre, false);
if (_bibliographie is null)
{
return;
}
var oeuvres = SelectionParMasquage(_bibliographie, !masquer);
_enCours = true;
_message = null;
var erreurs = new List<string>();
foreach (var oeuvre in oeuvres)
{
var motif = masquer
? await Api.MasquerOeuvreBibliographieAsync(AuteurId, oeuvre.Titre)
: await Api.DemasquerOeuvreBibliographieAsync(AuteurId, oeuvre.Titre);
if (motif is null)
{
MettreAJourOeuvre(oeuvre.Titre, o => o with { Masquee = masquer });
}
else
{
erreurs.Add(motif);
}
}
_enCours = false;
_message = erreurs.Count == 0 ? null : string.Join(" ", erreurs.Distinct());
_selection.Clear();
}
private async Task DemasquerAsync(OeuvreBibliographie oeuvre)
{
await ModifierMasquageAsync(oeuvre, true);
}
private async Task ModifierMasquageAsync(OeuvreBibliographie oeuvre, bool demasquer)
private async Task ModifierMasquageAsync(OeuvreBibliographie oeuvre, bool masquer)
{
_enCours = true;
_message = demasquer
? await Api.DemasquerOeuvreBibliographieAsync(AuteurId, oeuvre.Titre)
: await Api.MasquerOeuvreBibliographieAsync(AuteurId, oeuvre.Titre);
_message = masquer
? await Api.MasquerOeuvreBibliographieAsync(AuteurId, oeuvre.Titre)
: await Api.DemasquerOeuvreBibliographieAsync(AuteurId, oeuvre.Titre);
_enCours = false;
if (_message is null)
{
await ChargerAsync();
MettreAJourOeuvre(oeuvre.Titre, o => o with { Masquee = masquer });
}
}
@@ -493,17 +594,25 @@ else if (_bibliographie is { } biblio)
}
/// <summary>
/// Ajoute une œuvre à la liste d'envies, en emportant ce que la BnF en sait.
/// Ce que la BnF sait de l'œuvre, mis en forme pour la liste d'envies.
/// </summary>
/// <remarks>
/// L'auteur enregistré est celui de l'écran, pas celui de la notice : c'est lui que
/// l'utilisateur a en tête, et c'est sous ce nom qu'il retrouvera l'envie dans l'export.
/// <para>
/// Après l'ajout, la bibliographie est <b>relue</b> plutôt que corrigée en mémoire : c'est
/// le serveur qui sait rapprocher l'envie de l'œuvre, et refaire ce calcul ici le
/// dupliquerait — avec le risque qu'il diverge.
/// L'ISBN de la BnF est celui d'UNE édition relevée, souvent à 10 chiffres et parfois
/// épuisée. Il est repris tel quel : il aide à commander, sans engager le choix.
/// </para>
/// </remarks>
private EnregistrementSouhait Saisie(OeuvreBibliographie oeuvre) => new()
{
Titre = oeuvre.Titre,
Auteur = _bibliographie!.Auteur.Nom,
Editeur = oeuvre.Editeur,
Annee = oeuvre.Annee,
Isbn = oeuvre.Isbn,
};
private async Task SouhaiterAsync(OeuvreBibliographie oeuvre)
{
if (_bibliographie is null)
@@ -514,17 +623,7 @@ else if (_bibliographie is { } biblio)
_enCours = true;
_message = null;
var resultat = await Api.AjouterSouhaitAsync(new EnregistrementSouhait
{
Titre = oeuvre.Titre,
Auteur = _bibliographie.Auteur.Nom,
Editeur = oeuvre.Editeur,
Annee = oeuvre.Annee,
// L'ISBN de la BnF est celui d'UNE édition relevée, souvent à 10 chiffres et parfois
// épuisée. Il est repris tel quel : il aide à commander, sans engager le choix.
Isbn = oeuvre.Isbn,
});
var resultat = await Api.AjouterSouhaitAsync(Saisie(oeuvre));
_enCours = false;
@@ -534,6 +633,8 @@ else if (_bibliographie is { } biblio)
return;
}
await ChargerAsync();
MettreAJourOeuvre(
oeuvre.Titre,
o => o with { Souhaite = true, SouhaitId = resultat.Valeur?.Id });
}
}