mathieu/mabibli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

MaBibli 1.0.0

Browse Source 
Gestion de bibliothèque personnelle auto-hébergée : catalogue, prêts,
scan de code-barres, consultation hors-ligne.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Mathieu Limonier
2026-08-22 22:36:16 +02:00
co-authored by Claude Opus 5
commit 6a6d745af4
207 changed files with 35543 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MaBibli.Client/Layout/MainLayout.razor
+293
View File
@@ -0,0 +1,293 @@
@inherits LayoutComponentBase
@implements IDisposable
@inject ServiceLivresApi Api
@inject EtatReseau Reseau
@inject NavigationManager Navigation
@*
Mise en page pensée mobile d'abord : un bandeau, une colonne, rien à gauche.
Le PC hérite de la même colonne, simplement centrée et limitée en largeur.
⚠️ La navigation est passée EN HAUT le 2026-08-20, à la demande de l'utilisateur, après
que la barre d'onglets du bas se soit affichée « toujours très mal » sur son téléphone.
Cela renverse la décision du 2026-08-18 (« en bas, le pouce atteint le bas de l'écran ») :
le raisonnement sur le pouce reste juste, mais il ne vaut rien face à une barre qui ne
s'affiche pas correctement. Le repli retenu est celui du gabarit Blazor par défaut — un
bouton bascule et une liste qui se déploie — parce qu'il ne dépend d'AUCUNE mise en page
exotique : sans la moindre feuille de style, il reste une suite de liens lisibles les uns
sous les autres, au lieu d'une rangée écrasée.
*@
@*
⚠️ Bandeau et menu sont dans un MÊME conteneur collant, et ce n'est pas cosmétique : sur PC
la rangée du menu doit rester atteignable au défilement (lot R), et deux éléments collants
superposés obligeraient à écrire en dur la hauteur du bandeau dans le `top` du second.
*@
<div class="entete">
<header class="bandeau">
@* Le déplacement entre écrans était jugé « foireux » : d'un écran profond (bibliographie,
fiche de tome, ajout d'envie) il fallait deviner quel onglet ramenait en arrière. Un
retour explicite, au même endroit sur tous les écrans, répond à la question sans
obliger à connaître l'arborescence. *@
<button type="button" class="bandeau-icone" @onclick="Retour"
title="Revenir à l'écran précédent" aria-label="Revenir à l'écran précédent">
<span aria-hidden="true">&#8592;</span>
</button>
<a class="marque" href="">
@* Pictogramme dessiné en ligne plutôt que chargé depuis /logo-bandeau.svg : un fichier
séparé se sert (ou non) indépendamment de l'application, et c'est précisément ce qui
produisait l'icône cassée en haut à gauche — un appareil dont le cache datait d'avant
l'ajout du fichier recevait un 404. Un SVG en ligne ne peut pas manquer. *@
<svg class="marque-logo" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
<polygon points="32,15 10,20 10,47 32,44" fill="currentColor" />
<polygon points="32,15 54,20 54,47 32,44" fill="currentColor" />
<line x1="32" y1="15" x2="32" y2="44" stroke="#1b3a5c" stroke-width="1.5" />
</svg>
<span class="marque-nom">MaBibli</span>
</a>
@if (!Reseau.EnLigne)
{
@* Une pastille dans le bandeau, visible sur tous les écrans : l'état du réseau change
l'usage de l'application, il ne doit pas se découvrir au premier clic qui échoue. *@
<span class="pastille-hors-ligne" title="@EtatReseau.MotifHorsLigne">Hors ligne</span>
}
@if (_utilisateur?.Identifiant is not null)
{
<span class="utilisateur" title="@(_utilisateur.Simule ? "Utilisateur simulé (développement)" : "Connecté via le portail YunoHost")">
@_utilisateur.Affichage@(_utilisateur.Simule ? " (dev)" : "")
</span>
}
<button type="button" class="bandeau-icone bandeau-bascule" @onclick="BasculerMenu"
aria-expanded="@Aria.Etat(_menuOuvert)" aria-controls="menu-principal"
aria-label="@(_menuOuvert ? "Fermer le menu" : "Ouvrir le menu")">
<span aria-hidden="true">@(_menuOuvert ? "\u2715" : "\u2630")</span>
</button>
</header>
@*
Les six destinations de l'application. Sur PC elles tiennent en une rangée sous le
bandeau ; sur téléphone elles occupent l'écran ENTIER au clic sur la bascule (lot R) —
déployé sous le bandeau, le menu partageait l'écran avec la liste qu'on quittait, et l'on
choisissait sa destination au milieu d'autre chose.
⚠️ Un calque plein écran sans porte de sortie est un piège : trois en sont offertes, en plus
de la fermeture déjà en place sur LocationChanged — la croix, la touche Échap (le calque est
focalisé à l'ouverture, sans quoi aucun keydown ne lui parviendrait, comme celui
d'agrandissement des couvertures) et le clic hors des liens.
Les entrées restent actives hors-ligne : les six écrans se consultent depuis leurs
instantanés. Ce sont les écritures qui se désactivent, jamais la navigation.
*@
<nav id="menu-principal" class="menu @(_menuOuvert ? "menu-ouvert" : null)" aria-label="Navigation principale"
tabindex="-1" @ref="_menu" @onclick="FermerMenu" @onkeydown="SurToucheMenu">
@if (_menuOuvert)
{
<div class="menu-entete">
<span class="menu-titre">Aller à</span>
<button type="button" class="menu-fermer" @onclick="FermerMenu" aria-label="Fermer le menu">
<span aria-hidden="true">&#10005;</span>
</button>
</div>
}
<NavLink class="menu-lien" href="" Match="NavLinkMatch.All">Catalogue</NavLink>
<NavLink class="menu-lien" href="auteurs">Auteurs</NavLink>
<NavLink class="menu-lien" href="series">Séries</NavLink>
<NavLink class="menu-lien" href="revues">Revues</NavLink>
<NavLink class="menu-lien" href="prets">Prêts</NavLink>
<NavLink class="menu-lien" href="souhaits">Envies</NavLink>
@*
« À propos » n'est PAS une septième destination : c'est une annexe, et elle est
visuellement détachée pour cela. Les six entrées ci-dessus sont la bibliothèque ; celle-ci
porte le manuel, le contact, la version et la licence — on y va une fois, pas tous les
jours. Mise sur le même rang, elle diluerait une navigation qu'on venait justement de
reprendre. Elle reste dans le menu plutôt qu'en pied de page : sur téléphone, un pied de
page vit sous une liste de trois cents livres.
⚠️ Elle reste active hors-ligne, comme les six autres : la version qu'on vient y lire est
justement ce qu'on cherche quand quelque chose ne va pas.
*@
<NavLink class="menu-lien menu-lien-annexe" href="a-propos">À propos</NavLink>
</nav>
</div>
@if (!Reseau.EnLigne)
{
@*
Dire d'où viennent les données et de quand elles datent. Sans cette phrase, une
bibliothèque affichée hors-ligne est indiscernable d'une bibliothèque à jour — et un
livre ajouté depuis un autre appareil manquerait sans explication.
*@
<p class="bandeau-reseau" role="status">
<strong>Hors ligne.</strong>
@(Reseau.DerniereSynchro is { } synchro
? $" Données enregistrées {Quand(synchro)}. "
: " Aucune donnée n'a encore pu être enregistrée sur cet appareil. ")
Consultation et recherche fonctionnent ; les modifications sont impossibles.
</p>
}
<main class="contenu">
@Body
</main>
@code {
private UtilisateurCourant? _utilisateur;
private bool _etaitEnLigne = true;
private bool _synchroEnCours;
/// <summary>Menu déployé (téléphone). Sur PC la rangée est visible en permanence.</summary>
private bool _menuOuvert;
/// <summary>Le calque du menu doit prendre le focus au prochain rendu — sinon pas d'Échap.</summary>
private bool _menuAFocaliser;
private ElementReference _menu;
protected override async Task OnInitializedAsync()
{
Reseau.Change += SurChangementReseau;
Reseau.SynchroChange += SurSynchro;
// ⚠️ Sans cela, le menu resterait déployé par-dessus l'écran qu'on vient d'atteindre :
// NavLink ne referme rien de lui-même, et un clic sur « Auteurs » laisserait les six
// entrées empilées au-dessus de la liste des auteurs.
Navigation.LocationChanged += SurNavigation;
// Écoute des bascules online/offline avant tout appel : un démarrage hors-ligne doit
// aller directement au cache, sans attendre l'échec d'une requête.
await Reseau.DemarrerAsync();
_etaitEnLigne = Reseau.EnLigne;
_utilisateur = await Api.ObtenirUtilisateurAsync();
// Rafraîchit tout le fonds, pas seulement l'écran ouvert : c'est ce qui rend la
// bibliothèque entière consultable et cherchable après la coupure.
await SynchroniserAsync();
}
/// <summary>
/// Au retour du réseau, on recharge : la bibliothèque a pu changer depuis un autre appareil,
/// et les actions d'écriture redeviennent disponibles dans la foulée.
/// </summary>
private void SurChangementReseau()
{
var revenu = Reseau.EnLigne && !_etaitEnLigne;
_etaitEnLigne = Reseau.EnLigne;
_ = InvokeAsync(async () =>
{
StateHasChanged();
if (revenu)
{
_utilisateur = await Api.ObtenirUtilisateurAsync();
await SynchroniserAsync();
StateHasChanged();
}
});
}
private async Task SynchroniserAsync()
{
if (_synchroEnCours)
{
return;
}
_synchroEnCours = true;
try
{
await Api.SynchroniserAsync();
}
finally
{
_synchroEnCours = false;
}
}
/// <summary>Date de synchronisation en clair : l'heure suffit le jour même.</summary>
private static string Quand(DateTimeOffset instant)
{
var local = instant.ToLocalTime();
return local.Date == DateTimeOffset.Now.Date
? $"aujourd'hui à {local:HH:mm}"
: $"le {local:dd/MM/yyyy} à {local:HH:mm}";
}
/// <summary>La date affichée vient de changer : rien à recharger, juste à redessiner.</summary>
private void SurSynchro() => _ = InvokeAsync(StateHasChanged);
private void SurNavigation(object? _, LocationChangedEventArgs __)
{
if (!_menuOuvert)
{
return;
}
_menuOuvert = false;
_ = InvokeAsync(StateHasChanged);
}
/// <summary>
/// Remonte d'un cran dans l'arborescence des écrans, en repliant le menu au passage.
/// </summary>
/// <remarks>
/// ⚠️ <b>Renverse la décision du 2026-08-20</b> (« le retour passe par l'historique du
/// navigateur, jamais par une destination calculée »). L'historique remonte aussi les
/// allers-retours — filtre, ordre, édition — et l'on cliquait cinq fois sans quitter le même
/// écran. La parenté est désormais explicite et testable : voir
/// <see cref="RemonteeRoutes"/>, qui porte aussi le garde-fou « ne jamais sortir de
/// l'application » que <c>history.length</c> tenait mal dans une PWA <c>standalone</c>.
/// </remarks>
private void Retour()
{
FermerMenu();
Navigation.NavigateTo(RemonteeRoutes.Parent(Navigation.ToBaseRelativePath(Navigation.Uri)));
}
private void BasculerMenu()
{
_menuOuvert = !_menuOuvert;
// Le focus n'est demandé qu'à l'ouverture : c'est lui qui rend Échap opérant sur un
// calque, et il n'y a rien à focaliser une fois le menu refermé.
_menuAFocaliser = _menuOuvert;
}
/// <summary>
/// Referme le menu. Posé sur le calque lui-même : un clic hors des liens ferme, et un clic
/// SUR un lien ferme aussi — la navigation qui suit s'en chargerait de toute façon.
/// </summary>
private void FermerMenu() => _menuOuvert = false;
private void SurToucheMenu(KeyboardEventArgs e)
{
if (e.Key is "Escape" or "Esc")
{
FermerMenu();
}
}
protected override async Task OnAfterRenderAsync(bool premierRendu)
{
if (_menuAFocaliser)
{
_menuAFocaliser = false;
await _menu.FocusAsync();
}
}
public void Dispose()
{
Reseau.Change -= SurChangementReseau;
Reseau.SynchroChange -= SurSynchro;
Navigation.LocationChanged -= SurNavigation;
}
}
MaBibli.Client/Layout/MainLayout.razor.css
+136
View File
@@ -0,0 +1,136 @@
/* ⚠️ Ce n'est plus le bandeau qui colle en haut, mais le conteneur `.entete` qui le réunit au
menu (feuille globale, lot R) : les deux doivent rester solidaires au défilement. */
.bandeau {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
background: #1b3a5c;
color: #fff;
}
.marque {
color: #fff;
font-size: 1.15rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
/* La marque prend la place restante : c'est elle qui repousse la bascule à droite,
sans dépendre d'un justify-content que le nombre d'éléments du bandeau ferait varier
(la pastille hors-ligne et le nom d'utilisateur vont et viennent). */
flex: 1 1 auto;
min-width: 0;
}
.marque-nom {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.marque-logo {
width: 1.3rem;
height: 1.3rem;
flex: 0 0 auto;
color: #fff;
}
/* Boutons du bandeau (retour, bascule du menu). Cibles tactiles de 2.25rem : on les touche
au pouce, souvent en marchant. */
.bandeau-icone {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
font-size: 1.15rem;
line-height: 1;
color: #fff;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 6px;
cursor: pointer;
}
.bandeau-icone:hover,
.bandeau-icone:focus-visible {
background: rgba(255, 255, 255, 0.15);
}
.utilisateur {
flex: 0 1 auto;
font-size: 0.8rem;
opacity: 0.85;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 40%;
}
/* L'état du réseau change ce que l'application permet : il se voit dans le bandeau, en
permanence, et pas seulement au moment où une action échoue. */
.pastille-hors-ligne {
flex: 0 0 auto;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.15rem 0.5rem;
border-radius: 999px;
background: #f5d76e;
color: #4a3800;
white-space: nowrap;
}
/* Dire d'où viennent les données affichées, et de quand elles datent : sans cette phrase, un
catalogue hors-ligne est indiscernable d'un catalogue à jour. */
.bandeau-reseau {
max-width: 46rem;
margin: 0 auto;
padding: 0.6rem 1rem;
background: #fff8e1;
border-bottom: 1px solid #e6d28a;
color: #6b5200;
font-size: 0.9rem;
}
.contenu {
display: block;
width: 100%;
max-width: 46rem;
margin: 0 auto;
/* Marge basse généreuse : la barre d'actions flottantes ne doit pas masquer le dernier
livre de la liste. */
padding: 1rem 1rem 6rem;
}
/*
⚠️ Les styles du MENU ne sont PAS ici, mais dans `wwwroot/css/app.css`.
Deux raisons, la première étant un vrai bug corrigé le 2026-08-20 :
1. `NavLink` est un COMPOSANT. L'isolation CSS ne pose son attribut de portée (`b-xxxx`)
que sur les éléments écrits dans le balisage du composant courant — jamais sur ce que
rend un composant enfant. `.menu-lien` déclaré ici ne pouvait donc atteindre AUCUN des
six liens : le `<nav>` recevait bien son fond sombre, et les liens restaient en bleu
souligné par défaut. C'est exactement ce que l'utilisateur voyait (« toujours les liens
trop moches et pas ressemblant à un menu »). Le gabarit Blazor par défaut contourne cela
avec `::deep`.
2. Une feuille globale ne dépend pas du bundle `MaBibli.Client.styles.css`, qui est
précisément le fichier qu'un cache a déjà servi périmé ou pas du tout (voir « lot A1 »
et « L'icône cassée du bandeau » dans CLAUDE.md). La navigation est ce qui doit le moins
pouvoir tomber.
*/
@media (min-width: 40rem) {
/* La rangée du menu est visible en permanence à partir de cette largeur : la bascule
n'a plus rien à déployer. Le point de rupture est répété dans `app.css` — les deux
doivent rester identiques. */
.bandeau-bascule {
display: none;
}
}