Merge branch 'main' of https://git.azuze.fr/kawa/SharepointToolbox-Web

Components/Shared/HelpTip.razor

@@ -0,0 +1,35 @@
+@* Clickable "?" button that reveals an explanatory tooltip. Use to demystify SharePoint
+   jargon for users with limited SharePoint knowledge. Pass the explanation via Text
+   (typically a localized string: <HelpTip Text="@T["some.help"]" />). Click toggles the
+   bubble; it closes on a second click or when focus leaves the button. *@
+
+@if (!string.IsNullOrWhiteSpace(Text))
+{
+    <span class="help-tip @(Wide ? "help-tip-wide" : "") @(_open ? "open" : "")">
+        <button type="button" class="help-tip-mark" @onclick="Toggle" @onclick:stopPropagation="true"
+                @onclick:preventDefault="true" @onfocusout="Close"
+                aria-label="@Text" aria-expanded="@_open" title="@Text">?</button>
+        <span class="help-tip-bubble" role="tooltip">@Text</span>
+    </span>
+}
+
+@code {
+    /// <summary>The explanation shown inside the tooltip bubble.</summary>
+    [Parameter] public string? Text { get; set; }
+
+    /// <summary>Use a wider bubble for longer explanations.</summary>
+    [Parameter] public bool Wide { get; set; }
+
+    private bool _open;
+
+    private void Toggle() => _open = !_open;
+
+    // Delay the close so a click that moves focus off the button still toggles cleanly,
+    // and so the bubble doesn't vanish before a click on it registers.
+    private async Task Close()
+    {
+        await Task.Delay(150);
+        _open = false;
+        StateHasChanged();
+    }
+}

Components/Shared/LibraryPicker.razor

@@ -4,7 +4,7 @@
 @* Library name field with a picker: type a title, or click Browse to load and
    choose from the libraries on the selected site. *@
 <div class="form-group library-picker">
-    <label class="form-label">@Label</label>
+    <label class="form-label">@Label<HelpTip Text="@T["help.library"]" /></label>
     <div class="flex-row" style="gap:8px;align-items:stretch">
         <input class="form-input" style="flex:1"
                placeholder="@Placeholder"

Components/Shared/SitePicker.razor

@@ -4,7 +4,7 @@
 <div class="site-picker">
     <div class="flex-row" style="gap:8px;align-items:flex-end">
         <div class="form-group" style="flex:1">
-            <label class="form-label">@(Single ? T["sitepicker.label.site"] : T["sitepicker.label.sites"])</label>
+            <label class="form-label">@(Single ? T["sitepicker.label.site"] : T["sitepicker.label.sites"])<HelpTip Text="@T["sitepicker.help.site"]" /></label>
             <input class="form-input" @bind="_filter" @bind:event="oninput" placeholder="@T["sitepicker.ph.filter"]" />
         </div>
         <button class="btn btn-secondary" @onclick="LoadSites" disabled="@_loading">